iframe 跨站自适应高度

最新推荐文章于 2024-03-29 11:18:46 发布

wyq645741608

最新推荐文章于 2024-03-29 11:18:46 发布

阅读量133

点赞数

分类专栏： Javascript/JQuery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/wyq645741608/article/details/84710184

版权

Javascript/JQuery 专栏收录该内容

21 篇文章

订阅专栏

要在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>