博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于iframe页面高度自适应的问题
阅读量:5918 次
发布时间:2019-06-19

本文共 867 字,大约阅读时间需要 2 分钟。

iframe在实际开发中应该算是比较常见的,在一些情况下iframe的高度是不确定,甚至是时时变化的

一般这种情况会有下面几种情况:

1、父页面和iframe页面在同一个域下,这种情况最好解决。在iframe页面里通过window.parent即可定位到父页面的window对象,然后,通过定时器来检测iframe页面的高度变化,来设置父页面的相应容器的高度即可。

    实例代码:

    父页面:

1  2  3  4   
5 6 7 8 9 10

子页面:

1  2  3  4   
5 6 7 8 27 28

 

 

2、父页面和子页面不在同一个域下。这种情况下,基于安全性的考虑,一些浏览器中通过window.parent就访问不到父页面的window对象,解决办法如下:

    ①在iframe里面B添加一个隐藏的iframe标签;

    ②iframe引用的文件C是和父页面在同一个域下面的;

    ③通过循环来检测B页面上中height的高度 ,并且设置给隐藏的iframe标签的地址中作为参数;

    ④在iframe页面c中也设置一个定时器来读取地址的值,可以获取b页面的高度;

    ⑤c页面可以通过window.parent访问到父页面的window对象,并设置相应容器的高度

实例代码:

父页面:

1  2  3  4   
5 6 7 8
9
10
11 12

b页面

1  2  3    4     
5 6 7 8 9 27 28

c页面:

1  2  3  4   
5 6 7 8 18 19

 

 

 

3,当子页面的iframe不同域,且无法操控时,即不能够在里面添加代码时候,是没有办法实现高度自适应的

转载于:https://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html

你可能感兴趣的文章
前端自动化构建工具webpack简单入门——2
查看>>
MySQL面试题--常见的四种隔离级别
查看>>
企业级 SpringBoot 教程 (一)构建第一个SpringBoot工程
查看>>
玩转大数据系列之一:数据采集与同步
查看>>
hikari druid c3p0 dbcp jdbc对比
查看>>
interview questions
查看>>
SpringMVC的执行流程
查看>>
定位、读取手机状态等权限在6.0系统不管用
查看>>
FTP服务器开发
查看>>
CDN WAF功能开放公测 提升网络应用安全性能
查看>>
vivo Y51的USB调试模式在哪里,开启vivo Y51USB调试模式的教程
查看>>
zip压缩与解压
查看>>
hibernate,get,find,缓存,hibernate缓存
查看>>
DataTable排序,检索,合并详解
查看>>
ClusterwarePRCT-1011:Failed to run "oifcfg".Det...
查看>>
golang grpc 负载均衡
查看>>
解决hive中comment中文乱码的问题
查看>>
windows服务监控工具--Spotlight
查看>>
Run 'setenforce 1'to reenable 解决
查看>>
Linux目录详解
查看>>