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

跨域iframe 高度自适应

 
阅读更多

一、完全跨域(域名完全不同,不兼容IE6)

某次需求需要在页面中签入iframe,iframe的src页面和主页面不在同一个域内,而且iframe的内容也不是固定的,所以宽度需要自适应设置,经过网上的搜索探索,终于整好了,分享下代码;

 

1 www.a.com/index.html页面内容

 

<iframe src="http://www.b.com/b.html"  name="aIframeid"  id="aIframeid"  frameborder="no" border="0px" marginwidth="0"   
marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>

 

2 www.b.com/b.html页面内容

 

<iframe id="iframeProxy" name="iframeProxy" height="0" width="0" src="" style="display:none" ></iframe>
{literal}
<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight; //获取自身高度
    urlC = "http://www.a.com/a_proxy.html"; //设置iframeA的src
    document.getElementById("iframeProxy").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script> 

 

 3 www.a.com/a_proxy.html 中介页面

 

<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById('aIframeid');//A和main同域,所以可以访问节点
    iObjH = parent.parent.frames["aIframeid"].frames["iframeProxy"].location.hash;//访问自己的location对象获取hash值
    iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>

二 、 二级域名相同,三级域名不同

上面的方法也可以,但是也可以用一种最简单的方法:

在子页面中获取到本身的高度,然后写到cookie中,cookie的path设置为***.com,然后在父页面中获取这个cookie,

当然,在页面每次加载的时候,将这个cookie值设为空,然后再赋值本身的高度。只要子页面加载就重新赋值。

分享到:
评论

相关推荐

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

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

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的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文件了

    iframe跨域自适应高度模板

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

    Iframe 高度自适应浏览器高度

    当Iframe加载跨域内容时,安全限制可能会影响高度的动态调整。在这种情况下,可以使用HTML5的`sandbox`属性,配合`allow-scripts`允许Iframe内的脚本运行,以便计算高度。 5. **设定定时器**: 有些情况下,内容...

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

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

    iframe 跨域 自动适应高度

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

    iframe高度自适应

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

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

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

    iframe跨域嵌套自适应高度

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

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

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

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

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

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

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

    IFrame跨域高度自适应实现代码

    针对跨域IFrame高度自适应的问题,通常有两种方法: 1. 使用`postMessage` API: `postMessage` 是HTML5引入的一种新的通信机制,允许来自不同源的脚本采用异步方式进行有限的通信。在IFrame中,父页面可以通过...

    js实现iframe自适应高度

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

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

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

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

    这种方法虽然复杂一些,但可以有效地解决跨域Iframe的高度自适应问题,确保用户在浏览时不会看到滚动条,提供更好的用户体验。 总的来说,实现Iframe的高度自适应对于提高网页的可用性和美观性至关重要。无论是同域...

    可编辑iframe高度自适应(编辑器所见即所得模式)

    标题提到的“可编辑iframe高度自适应”问题,主要涉及如何确保`iframe`的高度能根据其内容动态调整,从而提供良好的用户体验,避免滚动条的出现或页面布局的混乱。`iframe`高度自适应是解决这个问题的关键技术。 ...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    - 考虑到用户体验,需要确保在用户滚动时Iframe也能自适应高度,这可能需要监听滚动事件并在滚动停止时调整高度。 - 为了防止无限循环,需要设定一个检查和调整的限制,比如设定一个最大尝试次数。 7. **压缩包中...

Global site tag (gtag.js) - Google Analytics