跨域iframe高度自适应 改进版(兼容)

采用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

Java代码  

  1. <iframe id="iframeB" name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>  

 iframe嵌套页面:B.html,放在页头或页尾每个页面都能调到

Java代码  

  1. <iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>  
  2. <script type="text/javascript">  
  3. function sethash(){  
  4.     var hashH = Math.max(document.body.scrollHeight,document.body.clientHeight);//获取自身高度  
  5.     urlC = "www.a.com/A.html"; //设置iframeA的src  
  6.     document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递  
  7. }  
  8. window.onload=sethash;  
  9. </script>  

 中介页面:A.html  
iframe页面主要的功能就是从地址栏中读取#height的值,然后调整iframe高度,因为被嵌入页面content的页面是会变化的,所以每500毫秒就会检测下。目前在项目中实现的效果还是可以的。

Java代码  

  1. <script>  
  2. //function iframeHeight() {  
  3.     var ifr = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点  
  4.     var hash = window.location.hash; //访问自己的location对象获取hash值  
  5.     if(hash){  
  6.         hash = hash.replace('height=', '');  
  7.         ifr.style.height = hash.split('#')[1]+ 'px';   
  8.     }  
  9. //}  
  10. //window.setInterval("iframeHeight()", 500);    
  11. </script>  

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

时间: 2024-11-03 14:28:06

跨域iframe高度自适应 改进版(兼容)的相关文章

Iframe高度自适应(兼容IEFirefox、同域跨域)

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

支持跨域iframe高度随内容动态缩放自适应

iframe高度随页面内容自适应高度,当页面高度变动时iframe高度也自动变化 浏览器兼容:IE6++.Firefox全系列.Chrome全系列.(其他版本浏览器未做测试,期待你测试评论反馈以完善本文,谢谢) 同域环境下实现方法: 方法一:仅修改iframe父页面(iframeA.php),iframe子页面内容(iframeB.php)不用添加其他js或额外代码 iframe父页面(iframeA.php)添加代码如下:  代码如下 复制代码 <iframe width="100%&q

CSS实现iframe高度自适应示例

前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进一个单独的空页面,在这个页面里加了个统计,让人看着这个页面就跟直接进入咨询页面一样,懒得折腾啥js,直接用css弄了下,还好需求也不太高.OK了吧. 后果:因为接触iframe很少,几乎就没用过,所以当时就谷歌.百度了下,也不记得当时都搜到了些啥个内容,反正需求也不太强,就直接用css解决了 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"

跨域iframe的高度自适应

原文:跨域iframe的高度自适应   跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度.   但跨域的情况则不允许对子页面或父页面的文档进行访问(返回undefined),所以我们要做的就是打通或间

js 跨域IFRAME自适应高度例子

需求: A页面使用iframe标签跨域包含B页面 问题: A/B页面不同域,A页面无法获取并自适应B页面高度 方案: 增加C页面,A/C页面同域,A包含B,B包含C,B通知C高度,C调整A页面iframe高度~   跨域IFRAME自适应高度   A页面: <iframe id="iframe_a" src="B页面url" width="100%" style="border:0"></iframe>

利用location.hash实现跨域iframe自适应_javascript技巧

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取

JQuery实现跨域IFrame自动高度方案

由于项目中引入了JQuery,不方便再引用YUI.所以依照 Session variables without cookies 原理 ,直接用JQuery实现如下: 场景:主页面 (emo_windowname.html)一个IFrame(framePreview), 在页面加载或者单击按钮时,让IFrame加载一个页面(http://...../正文.html). 条件:正 文.html 预告加入脚本,或者使用HttpModule加入脚本: $(function(){ window.name

页面-腾讯网评论的iframe是如何实现跨域获取高度的

问题描述 腾讯网评论的iframe是如何实现跨域获取高度的 http://ent.qq.com/a/20150601/007047.htm?pgv_ref=aio2015&ptlang=2052#p=1 下边可以看到腾讯所有的评论都是引入这个iframe实现的 iframe frameborder="no" scrolling="no" id="commentIframe" style="width: 100%; **heigh

跨域 iframe 父页面的js向子页面添加按钮 求大神指导啊!!

问题描述 跨域 iframe 父页面的js向子页面添加按钮 求大神指导啊!! 如题 跨域 iframe 父页面的js向子页面添加按钮 求大神指导啊!! 跨域 iframe 父页面的js向子页面添加按钮 求大神指导啊!! 跨域 iframe 父页面的js向子页面添加按钮 求大神指导啊!!