`
fuhao200866
  • 浏览: 78978 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

跨域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主页面: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>


分享到:
评论

相关推荐

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)

    本示例通过"java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)"的标题,我们可以看出这是一个解决浏览器兼容性问题并实现跨域文件上传的解决方案。下面将详细解释这个主题涉及的关键知识点。 1. **跨域资源共享 ...

    iframe跨域自适应高度模板

    本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先,让我们了解`iframe`跨域。由于同源策略,`iframe`默认无法访问或操作不同源的页面内容,包括获取页面高度、读取内容等。为了解决这个问题,...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    这段代码首先获取id为"iframeid"的iframe元素,然后检查浏览器是否支持getElementById方法(这主要是为了兼容早期的IE浏览器)。如果支持,它将尝试获取iframe的内容文档,并计算其中body元素的offsetHeight或...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    通过使用jQuery来实现iframe的高度自适应,我们可以确保内容在不同浏览器(包括IE、Firefox、Safari和Chrome)中的显示一致性,无论iframe内嵌的页面有多复杂。 首先,我们需要理解iframe的基本概念。IFrame,即...

    iframe跨域高度自适应例子源码

    标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe高度自适应

    在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是,这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**: 对于跨域的`iframe`,可以采用...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    iframe 跨域 自动适应高度

    然而,`iframe`在处理跨域内容时,会受到同源策略的限制,导致一些功能无法正常使用,比如获取iframe内的DOM元素或设置其高度。本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

    解决iframe跨域高度自适应问题的源码

    本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先,我们需要理解为什么会出现跨域问题。根据浏览器的同源策略,一个网页只能访问与之同源(即协议、域名和端口完全相同)的资源。而跨域则意味着iframe...

Global site tag (gtag.js) - Google Analytics