- 浏览: 55337 次
- 性别:
- 来自: 广州
文章分类
转自:http://www.5icool.org/a/201203/a1129.html
采用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 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> <script type="text/javascript"> function sethash(){ hashH = document.documentElement.scrollHeight; //获取自身高度 urlC = "www.a.com/A.html"; //设置iframeA的src document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递 } window.onload=sethash; </script>中介页面:A.html
<script> 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(); </script>同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。
采用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 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> <script type="text/javascript"> function sethash(){ hashH = document.documentElement.scrollHeight; //获取自身高度 urlC = "www.a.com/A.html"; //设置iframeA的src document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递 } window.onload=sethash; </script>中介页面:A.html
<script> 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(); </script>同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。
发表评论
-
程序中调用jdbc访问oracle不可以有英文分号
2011-08-09 17:16 1935今天也遇到下文的问题,主要是多了个";"的 ... -
mvnform权限系统
2011-07-21 16:26 902mvnforum权限系统分析 mvnforum ... -
iphone safari 样式
2011-02-22 22:07 0转自:http://kinvix.kdv.cn/blog/?p ... -
文件格式及相关的response.contentType
2011-02-17 16:17 1138转自:http://blog.sina.com.cn/s/bl ... -
url最大长度问题
2011-01-27 10:15 1401转自:http://j2ees.iteye.com/blog/ ... -
JAVA 中URL链接中文参数乱码的若干处理方法
2011-01-25 18:43 1153转自:http://www.sudu.cn/info/html ... -
js中刷新页面总结
2010-09-16 13:31 1511转自:http://hi.baidu.com/kbsy/blo ... -
图片自动缩放 js图片缩放
2010-09-10 19:03 1739文章转自:http://hi.baidu.com/crysta ... -
HTML 标签属性列表
2010-07-02 10:43 624标签属性 属性 描述 ALIGN alig ... -
Java核心API需要掌握的程度(转)
2010-04-17 17:15 601Java的核心API是非常庞的,这给开发者来说带来了很的方便, ... -
非阻塞I/0(转)
2010-04-17 17:10 996文章转自:http://www.100ks ... -
GWT小结
2010-04-01 14:35 0GWT支持java.lang和java.util包的子集,还支 ... -
JDom小结
2010-04-01 14:23 0JDom包的结构: org.JDom ... -
java集合类的研究
2010-03-16 16:36 586HashSet的初始容量时16,其增长的基数时2,也就是说,当 ... -
Java:集合类性能分析【转】
2010-03-16 15:26 855这篇文章是转的,暂时没有验证文章中的正确性,我有时间会一一验证 ... -
HTTP错误请求代码一览[http,response,error code]
2010-03-10 11:40 3056static int SC_ACCEPTED ... -
ejb的entitybean中使用动态的sql
2010-03-05 15:06 707由于接触EJB的时间比较短,一直都十分好奇,如何使用容器来执行 ... -
LinkedList的Iterator的性能分析
2010-03-02 10:09 929LinkedList的Iterator 的性能颈瓶: 对于It ... -
RMI原理概要
2010-02-24 13:30 615其中远程对象要实现remote接口以及序列化接口。客户端值 ... -
java获取系统属性
2010-02-24 09:13 599java.version Java 运行时环境版本 jav ...
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
NULL 博文链接:https://cjb.iteye.com/blog/406466
同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然 后在主页面进行设置来实现。 代码如下,可复制。另外,
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
使用jquery/jsp/servlet/iframe实现跨浏览器跨全(子)域多文件上传操作.希望能给大家带来帮助.
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.
iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
高度自适应 跨域访问实例下载 高度自适应 跨域访问实例下载
链接:https://pan.baidu.com/s/1-mjkHmiuVLJzmqhnIyBHag 提取码:w9vu
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。