使用iframe装载页面

来源：互联网发布：java工作一年没提高编辑：程序博客网时间：2024/06/05 11:37

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

<BODY>  <ul>  <li onclick="readFrame('index.html');">主页</li>  <li onclick="readFrame(yellow.html);">黄页</li>  <li onclick="readFrame('blue.html')">蓝页</li>  <li onclick="readFrame('orange.html');">橙页</li></ul><iframe id="qframe" src="ImgPlayer.html" name="qframe" scrolling="no" frameborder="0px"     width="200px" onload="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高度而变。
至于什么原因，暂不清楚，可能是跟浏览器机制有关。

0 0