跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用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 id="iframeB" name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"》《/iframe》
复制代码
iframe嵌套页面:B.html
- 《iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;"》《/iframe》
- function sethash(){
- hashH = document.documentElement.scrollHeight; //获取自身高度
- urlC = "www.a.com/A.html"; //设置iframeA的src
- document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
- }
- window.οnlοad=sethash;
复制代码
- function pseth() {
- var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
- iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
- iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
- }
- pseth();
复制代码
转自:http://cued.xunlei.com/log019
转载于:https://www.cnblogs.com/Gwen-hui/p/3384072.html
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)相关推荐
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- iframe高度自适应的6个方法【转载】
iframe高度自适应的6个方法 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们 ...
- 6种iframe高度自适应的方法
js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.我们可以通过css来给它直接定义一个高度,同样可以实现上面的需 ...
- CSS完美实现iframe高度自适应(支持跨域)
https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...
- Iframe高度自适应(兼容IE/Firefox、同域/跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- Iframe高度自适应(兼容IEFirefox、同域跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- 跨域iframe的高度自适应
原文:跨域iframe的高度自适应 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或docum ...
- 纯CSS实现iframe高度自适应,完美兼容各种浏览器,同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...
- iframe高度自适应(IE6+、FF、Opera、Chrome等测试通过)
在主页面中对于嵌入的iframe页面高度未知,而且iframe页面的高度也不定,故不能在主页面中通过DOM来控制高度.在iframe页面中加入以下脚本便可实现: /* iframe 高度自适应脚本(I ...
最新文章
- 基于uPC2710T设计信标射频放大电路
- PCB相关的基础知识
- module_param 在内核编程中的作用
- php 非数字和字母,如何通过非数字与字符的方式实现PHP WebShell详解
- macos+未能和恢复服务器,macOS Big Sur 完美降级教程
- using + .net 中的别名
- 2018最新完整版黑马安卓android第52期(基础+就业班)61G打包
- 虚拟机Windows xp联网
- 关于 Chrome Console 查看DOM详情细节的奇思淫巧
- PHP汉字转拼音函数类
- matlab模糊控制侧方位泊车
- 什么是rundll32.exe,为什么运行?
- html5竞赛试题,全国大学生英语竞赛试题
- Games101-课程9笔记
- 为什么百度搜索引擎优化比以前更难?
- android 自动设置时区,Android Things入门-设置本地时区
- 中国成为北极理事会正式观察员国 将享合法权利
- 小U管家如何加入联盟?
- 这些年盘过的航模、车模、船模
- 一、项目整体管理(输入/工具与技术/输出)
热门文章
- [转]使用FFmpeg将视频推流到nginx,通过vlc拉流播放(通过命令的方式)
- 读书笔记_量化交易如何建立自己的算法交易01
- 案例学习BlazeDS+Spring之十二:Traderdesktop
- 苹果笔记本怎么找文件夹_苹果笔记本电脑回收价格是否合理怎么看
- mysql删除表外键_MySQL删除所有表的外键约束、禁用外键约束
- curl: (52) Empty reply from server
- main run方法没用_多线程:解决Runnable接口无start()方法的问题
- mysql多源复制 知乎_技术分享 | MySQL 多源复制场景分析
- Puzzle——模拟
- 1. 方程求根(二分法)