邵珠庆の博客 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier

411月/130

iframe同域或异域下高度自动适应(兼容种浏览器)

利用javascript来控制iframe高度自动适应,介于javascript对不同域名权限的限制,分为两种情况:

同域名情况下:

同域名下面,iframe自动适应高度,相对简单,下面代码兼容所有浏览器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>iframe自动适应高度</title>
  6. <script type="text/javascript">
  7. <!--//
  8. function sizeFrame() {
  9.     var F = document.getElementById("myFrame");
  10.     if(F.contentDocument) {
  11.         F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
  12.     } else {
  13.         F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
  14.     }
  15. }
  16. window.onload=sizeFrame;
  17. //-->
  18. </script>
  19. </head>
  20. <body>
  21. <iframe width="100%" id="myFrame" src="http://www.a.com" scrolling="no" frameborder="0">同域情况</iframe>
  22. </body>
  23. </html>

异域情况下:

假设有一个main.html页面在服务器A上,有一个待载入的页面test.html在服务器B上。要想实现main.html利用iframe载入test.html,iframe高度要实现自动延伸,可利用一个中介页面z.html

方法:

B服务器上的页面test.html利用隐藏iframe加载z.html,test.html页面计算自己的页面高度并赋值给z.html的hash即 z.html#height(计算出的高度),z.html加载时,获取hash,并设置main.html中iframe的高度。废话不说了,直接看下面的代码吧

main.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. <!--//
  6. function sizeFrame() {
  7.     var F = document.getElementById("iframeB");
  8.     if(F.contentDocument) {
  9.         F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
  10.     } else {
  11.         F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
  12.     }
  13. }
  14. window.onload=sizeFrame;
  15. //-->
  16. </script>
  17. </head>
  18. <body>
  19. <iframe id="iframeB"  name="iframeB" src="http://www.b.com/test.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
  20. </body>
  21. </html>
  22.  

test.html页面中需要加入的代码如下

  1. <iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
  2. <script type="text/javascript">
  3. function sethash(){
  4.     hashH = document.documentElement.scrollHeight; //获取自身高度
  5.     urlC = "http://www.a.com/z.html"; //设置iframeA的src
  6.     document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
  7. }
  8. window.onload=sethash;
  9. </script>

中介页面z.html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. function  pseth() {
  6.     var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
  7.     iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
  8.     iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
  9. }
  10. pseth();
  11. </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

查看demo

 

邵珠庆推荐文章

博文加载中...

anyShare分享到:

喜欢这个文章吗?

考虑订阅我们的RSS Feed吧!

发布在 邵珠庆

评论 (0) 引用 (0)

还没有评论.


Leave a comment

*

还没有引用.