iframe自适应高度(适合IE firefox opera)
做有些网页的时候用frameset会很方便,但是frameset很影响速度,而且还很不美观,并且seo也不好.所以用iframe还是比较好的选择.
后来看到QQ空间个人中心也用的iframe,很漂亮.很好用.于是也试着用iframe.但是自适应高度很是个问题.不同的游戏器都会不一样,说到这儿我要再深深的BS一下IE..
做了很多尝试,在网上看了很久,做了下小小的总结.希望对大家有帮助
怎么获取网页的高度
对于IE(我用的IE8,IE6就不知道行不行了)
document.getElementById(“myframe”).Document.body.scrollHeight;
对于其他浏览器(firefox opera)
document.getElementById(“myframe”).contentDocument.body.scrollHeight;
共用方法(IE8 firefox opera)
document.getElementById(“myframe”).contentWindow.document.body.scrollHeight;
代码
1: <html>2: <head>3: <title>iframe自适应高度</title>4: <script type="text/javascript">5: function change(){6: var o=document.getElementById("myframe");7: var height= o.contentWindow.document.body.scrollHeight;8: o.height=height;9: }10:11: function show(){12: var o=document.getElementById("myframe");13: alert(o.contentWindow.document.body.scrollHeight);14: }15: </script>16: </head>17: <body onresize="change()">18: <div>19: <button onclick="document.getElementById('myframe').src='article.html'">日志</button>20: <button onclick="document.getElementById('myframe').src='pic.html'">图片</button>21: <button onclick="show()">显示高度</button>22: </div>23: <iframe frameBorder="1" scrolling="no" id="myframe" width="50%" src="article.html" onload="change()"></iframe>24: </body>25: </html>
注:
我用的浏览器版本
IE8 firefox3.5 opera10.05
做有些网页的时候用frameset会很方便,但是frameset很影响速度,而且还很不美观,并且seo也不好.所以用iframe还是比较好的选择. 后来看到QQ空间个人中心也用的iframe,很漂亮.很好用.于是也试着用iframe.但是自适应高度很是个问题.不同的游戏器都会不一样,说到这儿我要再深深的BS一下IE.. 做了很多尝试,在网上看了很久,做了下小小的总结.希望对大家有帮助
怎么获取网页的高度
对于IE(我用的IE8,IE6就不知道行不行了)
document.getElementById(“myframe”).Document.body.scrollHeight;
对于其他浏览器(firefox opera)
document.getElementById(“myframe”).contentDocument.body.scrollHeight;
共用方法(IE8 firefox opera)
document.getElementById(“myframe”).contentWindow.document.body.scrollHeight;
代码
注:1: <html>2: <head>3: <title>iframe自适应高度</title>4: <script type=“text/javascript”>5: function change(){6: var o=document.getElementById(“myframe”);7: var height= o.contentWindow.document.body.scrollHeight;8: o.height=height;9: }10:11: function show(){12: var o=document.getElementById(“myframe”);13: alert(o.contentWindow.document.body.scrollHeight);14: }15: </script>16: </head>17: <body onresize=“change()”>18: <div>19: <button onclick=“document.getElementById(‘myframe’).src=‘article.html’”>日志</button>20: <button onclick=“document.getElementById(‘myframe’).src=‘pic.html’”>图片</button>21: <button onclick=“show()”>显示高度</button>22: </div>23: <iframe frameBorder=“1” scrolling=“no” id=“myframe” width=“50%” src=“article.html” onload=“change()”></iframe>24: </body>25: </html>
我用的浏览器版本
IE8 firefox3.5 opera10.05
代码下载: iframe.zip