`

iframe 跨站自适应高度

 
阅读更多
要在a.com/a.html 中 包含 b.com/b.html 操作步骤
1:a.html
<iframe id="commentiframe" src="http://b.com/b.html" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" ></iframe>

2: b.html
除了内容外加一段
<iframe id="c_iframe"  height="0" width="0"  src="" ></iframe>
<script type="text/javascript">
    (function autoHeight(){
        var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
        var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
        var c_iframe = document.getElementById("c_iframe");
        c_iframe.src='http://a.com/temp.html#'+b_height;
    })();
</script>

3:在a.com 目录增加一个temp.html 文件,代码为
<script type="text/javascript">
    var b_iframe = window.parent.parent.document.getElementById("commentiframe");
    var hash_url = window.location.hash;
    if(hash_url.indexOf("#")>=0){
        var hash_height = hash_url.split("#")[1]+"px";
        //var hash_width = hash_url.split("#")[1].split("|")[1]+"px";
        //b_iframe.style.width = hash_width;
        b_iframe.style.height = hash_height;
    }
</script>

 

分享到:
评论

相关推荐

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

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

    iframe跨域自适应高度模板

    同时,`iframe`内容的动态加载可能使得其高度不固定,如果不能自适应高度,可能会导致页面布局出现问题。本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先,让我们了解`iframe`跨域。由于同源...

    iframe自适应高度demo

    综上所述,`iframe`自适应高度是通过JavaScript、CSS布局技术(如Flexbox或Grid)、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求,如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

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

    2. `order_list.html`: 这个文件很可能被用作iframe的源,即被嵌入到index.html中的页面,可能包含了一些需要自适应高度的内容。 3. `jquery-1.7.2.min.js`: 这是jQuery库的版本1.7.2的压缩版,它是实现iframe高度...

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    ### 解决IE、Firefox、Chrome、Safari浏览器...总之,通过合理利用JavaScript和对`iframe`标签的适当修改,我们能够有效地解决不同浏览器中`iframe`显示高度不一致的问题,从而提升Web应用的跨浏览器兼容性和用户体验。

    iframe自适应高度的简单解决办法

    本篇将深入探讨如何实现`iframe`自适应高度的简单解决办法。 首先,我们需要了解`iframe`的基本结构。在HTML中,创建一个`iframe`标签如下: ```html &lt;iframe src=...

    Iframe实现跨浏览器自适应高度解决方法

    本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下: 该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单...

    iframe自适应子页面内容高度

    本话题将深入探讨如何使`iframe`自适应其子页面的内容高度,确保用户无需滚动主页面即可查看全部子页面内容。 `iframe`的基本结构如下: ```html &lt;iframe src="child-page....

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    "iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)"这个标题所指向的,就是一种跨浏览器的策略,确保iFrame内容无论何时更新,都能自动调整其高度,从而避免滚动条的出现和内容溢出。...

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

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

    iframe自适应内容页面的高度

    以下将详细介绍如何实现`iframe`的自适应高度,并考虑良好的浏览器兼容性。 1. **基础理解**: - `iframe`标签:HTML5中的`&lt;iframe&gt;`元素用于在当前文档中嵌入另一个HTML文档,常用于加载外部资源,如广告、地图、...

    iframe自适应高度

    3. **安全性考量**:使用`iframe`时需注意跨站脚本攻击(XSS)等安全问题。应确保`iframe`所加载的内容来自可信的来源。 #### 五、总结 通过上述分析可以看出,实现`iframe`自适应高度不仅能够提升用户体验,还能...

    iframe窗口高度自适应的又一个巧妙实现思路

    在本文中,我们将探讨一种巧妙的方法来解决在跨域环境下,使用`iframe`实现窗口高度自适应的问题。问题的核心在于,由于JavaScript的同源策略限制,我们无法在不同域名之间直接进行DOM操作或数据交换。为了解决这个...

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

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

Global site tag (gtag.js) - Google Analytics