技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> iframe大小自适应

iframe大小自适应

浏览:8807次  出处信息

   前几天,舍友去某互联网公司面前端研发工程师。回来后,他就跟我们聊了下面试官给他出的题。其中,有一道题是“如何实现iframe高度的自适应?”。好吧,我承认,我听到iframe这个词的第一反应就是:这个东西性能差、搜索引擎不友好等等。由于这样的偏见,还真没有好好研究一下iframe。其实,iframe对于第三方的广告插入还是非常有用的。这两天,好好研究了下iframe自适应的问题。研究的过程中,利用nodejs搭建了简单的服务器来测试方法的正确性。

同域下的iframe自适应

   同域下实现iframe自适应比较简单,可以直接利用javascript操作DOM来达到目的。下面的示例是在http://localhost:8887作用域下,iframe.html引入index.html。

   index.html

<img src="ghost.png" alt="ghost" style="width:600px; height: 300px;">

   iframe.html

<iframe id="iframe" src="index.html" frameborder="0" scrolling="no" style="border: 0px;"></iframe>
 
<script>
    // 兼容性代码
  function autoHeight(iframe) {
    if (iframe) {
      var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
      if (iframeWin.document.body) {
        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        iframe.width = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth;
      }
    }
  }
  window.onload = function() {
    autoHeight(document.getElementById('iframe'));
  }
</script>

   显示效果

iframe test

   注意:一定要通过服务器来访问iframe.html,像chrome这样的浏览器访问本地静态文件会有限制,导致错误!

跨域下的iframe自适应

   跨域(只要协议、域名、端口有任何一个不同,都被当作是不同的域)的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的大小。

   解决方案原理:使用代理页面,并通过location.hash来进行传值。

   示例如下:http://localhost:8887下的一个页面a.html使用iframe标签引入http://localhost:8888下的一个页面b.html。在http://localhost:8887下创建一个agent.html页面做代理,b.html此时可利用隐藏的iframe通过location.hash将自己的大小传给agent.html。由于agent.html与a.html在同一个域下,所以agent.html可直接操作a.html,不受js同源限制。

   a.html

// 引入b.html
<iframe id="a_iframe" src="http://localhost:8888/b.html" frameborder="0" scrolling="no" style="border: 0;"></iframe>

   b.html

<img src="ghost.png" alt="ghost" style="width:600px; height: 300px;">
 
// 通过隐藏的iframe,利用loacation.hash传值
<iframe id="b_iframe" src="http://localhost:8887/agent.html" height="0" width="0" frameborder="0" style="display: none;"></iframe>
 
<script>
  (function autoHeight() {
    var width = Math.max(document.body.scrollWidth, document.body.clientWidth);
    var height = Math.max(document.body.scrollHeight, document.body.clientHeight);
    var b_iframe = document.getElementById("b_iframe");
    b_iframe.src = b_iframe.src + "#" + width + "|" + height;
  })();
</script>

   agent.html

<script>
  var a_iframe = window.parent.parent.document.getElementById("a_iframe");
  var hash_url = window.location.hash;
  if (hash_url.indexOf("#") >= 0) {
    var hash_width = hash_url.split("#")[1].split("|")[0] + "px";
    var hash_height = hash_url.split("#")[1].split("|")[1] + "px";
    a_iframe.style.width = hash_width;
    a_iframe.style.height = hash_height;
  }
</script>

   显示效果

   iframe test 2

结语

   完整测试代码请戳这

参考

建议继续学习:

  1. iframe里src="about:blank"的问题。    (阅读:6847)
  2. 跨域请求的iframe解决方案(1)    (阅读:5392)
  3. BO报表系统嵌入Iframe在firefox下的错误修改    (阅读:4631)
  4. ie下iframe输入框焦点丢失解决方案    (阅读:4295)
  5. 三谈Iframe自适应高度    (阅读:3637)
  6. 使用document.domain和iframe实现站内AJAX跨域    (阅读:3313)
  7. Google+开发团队分享经验    (阅读:3309)
  8. 跨域请求的iframe解决方案(2)    (阅读:3146)
  9. IFrame带来的Session问题    (阅读:2788)
  10. iframe自适应高度代码    (阅读:2803)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1