iframe页面高度自动适应

 

1、同域下的iframe自适应高度

 

例如

 

<iframe src="url" id="Iframe" frameborder="0" scrolling="no" style="border:0px;width:1000px;" οnlοad="autoHeight();"></iframe>
<script type="text/javascript">
    function autoHeight(){
        var iframe = document.getElementById("Iframe");
        if(iframe.Document){//ie自有属性
            iframe.style.height = iframe.Document.documentElement.scrollHeight;
        }else if(iframe.contentDocument){//ie,firefox,chrome,opera,safari
            iframe.height = iframe.contentDocument.body.offsetHeight ;
        }
    }
</script>

 

 

2、跨域下的iframe自适应高度

 

具体示例如下

 

// url1中包含iframe:
<iframe src="http://www.csdn.net/url2" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

// 在url2中加入如下代码：
<iframe id="c_iframe"  height="0" width="0"  src="http://www.studyofnet.com /url11" style="display:none" ></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=\\'#\\'" 
    })();
</script>

// 最后，url11中放入一段js:
<script type="text/javascript">
    var b_iframe = window.parent.parent.document.getElementById("Iframe");
    var hash_url = window.location.hash;
    if(hash_url.indexOf("#")>=0){
        var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
        var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
        b_iframe.style.width = hash_width;
        b_iframe.style.height = hash_height;
    }
</script>

 

 

文章转载自：      iframe嵌入页面高度自动适应       http://www.studyofnet.com/news/256.html