博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
阅读量:4352 次
发布时间:2019-06-07

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

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错 误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一 个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的 location对象。这样A就可以通过location.hash获得B的高度。(location是javascript里边管理地址栏的内置对象, 比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash 则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以 做一些非常有意义的事情。)。由于A和main页面同域,所以可以修改main的dom节点属性,从而达到我们设置iframe标签高度的目的。

关键代码:

iframe主页面:main.html

iframe嵌套页面:B.html

  

中介页面:A.html

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。

转载于:https://www.cnblogs.com/zxktxj/p/3156337.html

你可能感兴趣的文章
P2330 [SCOI2005] 繁忙的都市 洛谷
查看>>
phpcms v9 配置sphinx全文索引教程
查看>>
使用C#和Java发送邮件(转载)
查看>>
转载:32位Win7使用4G内存
查看>>
Hadoop中eclipse 插件的编译 笔记四
查看>>
MariaDB备份之XtraBackup
查看>>
Activity间用Intent和Bundle传递参数
查看>>
记忆化搜索(DFS+DP) URAL 1501 Sense of Beauty
查看>>
HDU4624 Endless Spin(概率&&dp)
查看>>
js-新闻无缝滚动
查看>>
Python在自动化运维时最常用的50个方法(转)
查看>>
Java 学习之路 之 泛型方法
查看>>
Test
查看>>
C# 整理
查看>>
jQuery的效果函数
查看>>
AngularJS中使用$resource
查看>>
[poj3261]Milk Patterns(后缀数组)
查看>>
[luogu3369]普通平衡树(fhq-treap模板)
查看>>
题解 P2799 【国王的魔镜】
查看>>
写写代码,注意注意细节
查看>>