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

同域下的iframe自适应

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

index.html

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

iframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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.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

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

b.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

1
2
3
4
5
6
7
8
9
10
<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大小自适应的更多相关文章

  1. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

  2. iframe高度自适应(同域)

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  3. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  4. WebView加载HTML图片大小自适应与文章自动换行

    http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...

  5. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  6. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  7. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  8. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

  9. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

随机推荐

  1. mysql相关文章

    win7系统下如何配置php-Apache-mysql环境 Mac 可设置环境变量的位置.查看和添加PATH环境变量 Mac如何删除MySQL,Mac下MySQL卸载方法 mac+apache+php ...

  2. Coreseek Windows下安装调试

    由于项目需要全文检索,后面就去网上查了下资料,找到了Sphinx[中文是狮身人面像]这个全文检索引擎,听说挺好用的,不过没有中文分词.后面又去找了一下,找到了Coreseek,一款中文全文检索/搜索软 ...

  3. 【JVM】JVM系列之执行引擎(五)

    一.前言 在了解了类加载的相关信息后,有必要进行更深入的学习,了解执行引擎的细节,如字节码是如何被虚拟机执行从而完成指定功能的呢.下面,我们将进行深入的分析. 二.栈帧 我们知道,在虚拟机中与执行方法 ...

  4. 【JUC】JDK1.8源码分析之ReentrantReadWriteLock(七)

    一.前言 在分析了锁框架的其他类之后,下面进入锁框架中最后一个类ReentrantReadWriteLock的分析,它表示可重入读写锁,ReentrantReadWriteLock中包含了两种锁,读锁 ...

  5. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  6. Linux基础知识之文件和目录的权限机制

    Linux中的用户 Linux中的用户有三类,分别是: 所有者(u) 同组用户(g) 其他人(o) 如下图所示,假设存在两个组:groupA和groupB,rachel和ross属于组groupA,m ...

  7. HtmlHelper拓展实现RadioList

    mvc中HtmlHelper可以帮助我们生成许多Html控件,但是没有类似DropDownList的RadioList,但是发现这些方法都是拓展方法,于是就想自己也拓展一个RadioList 从网上下 ...

  8. 装饰模式 - Decorator 和 外观模式 - Facade

    装饰模式 Decorator,不改变接口但动态给对象加入责任,所需功能按顺序串联起来控制,比生成子类灵活. 外观模式 Facade,让接口更简单.为子系统中的一组接口提供一个一致的界面. 参考:

  9. Java中,关于字符串类型、随机验证码、 时间类型

    一.字符串类型:String类型 定义一个字符串 String a="Hello World"; String b= new String ("Hello World&q ...

  10. E - The Values You Can Make

    E - The Values You Can Make Description Pari wants to buy an expensive chocolate from Arya. She has ...