iframe父页面与子页面赋值

最近因为公司之前的系统用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赋值，同样只适用于同源

iframe父页面与子页面赋值

猜你喜欢