iframe父页面与子页面赋值

最新推荐文章于 2022-10-28 11:46:19 发布

weixin_30568715

最新推荐文章于 2022-10-28 11:46:19 发布

阅读量765

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/change-oneself/p/9635454.html

版权

最近因为公司之前的系统用iframe，里面的高度不能自适应，导致了很多问题，今天特意拿来研究一下，从网上找了一些方法试验了一下，这里记录一下成功的方法

1、父页面获取子页面的高度，并给父页面赋值

父页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="myhtml">
        <iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>
    </div>
</body>
</html>
<script>
    function setIframeHeight(id){
        var iframe = document.getElementById(id);
        try{
            if(iframe.attachEvent){
                iframe.attachEvent("onload", function(){
                    iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
                });
                return;
            }else{
                iframe.onload = function(){
                    var obj = ifram.contentDocument || ifram.contentWindow.document;
                    iframe.height = obj.body.scrollHeight+16;
                };
                return;                 
            }     
        }catch(e){
            throw new Error('setIframeHeight Error');
        }
    }
    setIframeHeight("ifram");
</script>
<style>
    #ifram {
        width: 300px;
        border: 1px solid #ccc;
    }
</style>

iframe里面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test">lalalalala</div>
</body>
</html>
<style>
    #test {
        height: 1000px;
    }
</style>

小结：为什么要加16，试验了一下刚好差一个滚动条的高度，为了不出现双滚动条，只能再把他的高加了一点。

另外只测试了chrome，在chrome下直接是不好使的，需要自己起一个服务，才不报错，这在同源下做了测试。

2、子页面给父页面赋值

父页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="myhtml">
        <iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>
    </div>
</body>
</html>
<style>
    #ifram {
        width: 300px;
        border: 1px solid #ccc;
    }
</style>

iframe里面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test">lalalalala</div>
</body>
</html>
<script>
function setParentIframeHeight(id){
    try{
        var parentIframe = parent.document.getElementById(id);
         if(window.attachEvent){
            window.attachEvent("onload", function(){
                parentIframe.height = document.documentElement.scrollHeight;
            });
            return;
        }else{
            window.onload = function(){
                parentIframe.height = document.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setParentIframeHeight Error');
    }
}
setParentIframeHeight("ifram");
</script>
<style>
    #test {
        height: 1000px;
    }
</style>

小结：通过parent.document.getElementById(); id是父页面的id赋值，同样只适用于同源

转载于:https://www.cnblogs.com/change-oneself/p/9635454.html

weixin_30568715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe父页面与子页面赋值

最近因为公司之前的系统用iframe，里面的高度不能自适应，导致了很多问题，今天特意拿来研究一下，从网上找了一些方法试验了一下，这里记录一下成功的方法1、父页面获取子页面的高度，并给父页面赋值父页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫