首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

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

2012年10月25日 发布 阅读(507) 作者:懒炖

利用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>
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>
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •