使用iframe装载页面

最新推荐文章于 2024-03-27 09:38:20 发布

Qiustion

最新推荐文章于 2024-03-27 09:38:20 发布

阅读量1k

点赞数

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/50695882

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本例子是通过点击li列来改变iframe的属性src，实现动态地显示相关的网页内容

<BODY>
  
<ul>
  <li οnclick="readFrame('index.html');">主页</li>
  <li οnclick="readFrame(yellow.html);">黄页</li>
  <li οnclick="readFrame('blue.html')">蓝页</li>
  <li οnclick="readFrame('orange.html');">橙页</li>
</ul>

<iframe id="qframe" src="ImgPlayer.html" name="qframe" scrolling="no" frameborder="0px" 
    width="200px" οnlοad="reinitframe()">

</iframe>

<script type="text/javascript">

    
    function readFrame(urlStr){
        $('#qframe').attr('src',urlStr);
    }

    function reinitframe(){
        var iframe=document.getElementById("qframe");
        try{
            var bHeight=iframe.contentDocument.body.scrollHeight;
            var dHeight=iframe.contentDocument.documentElement.scrollHeight;
            if(navigator.appName=="Microsoft Internet Explorer"){
                var height=Math.max(bHeight+50,200);
                iframe.height=height;
            }else{
                var height=Math.max(dHeight,200);
                iframe.height=height;
            }
        }
        catch(ex){

        }
    }

</script>

</body>

注：
1、关于scrollHeight值
iframe.contentDocument.body.scrollHeight
iframe.contentDocument.documentElement.scrollHeight
iframe.contentWindow.document.body.scrollHeight
iframe.contentWindow.document.documentElement.scrollHeight
此四个属性值都能表示iframe的内容高度，chrome与opera中，此四个值都是相等的；
而IE10里，xxx.body.scrollHeight 小于 yyy.documentElement.scrollHeight，相差50像素

2、关于浏览器的高度适应iframe的高度
如果直接双击打开网页文件，（地址栏显示: file:///C:/xxxx/xxx.html），浏览器的高度不会随iframe高度而变化；
在发布状态下（地址栏显示：http://xxxx/xxx.html），浏览器的高度是随着iframe高度而变。
至于什么原因，暂不清楚，可能是跟浏览器机制有关。