前几天,舍友去某互联网公司面前端研发工程师。回来后,他就跟我们聊了下面试官给他出的题。其中,有一道题是“如何实现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. ModelState.IsValid总为false原因

    总结在开发中遇到的一个问题 ModelState.IsValid 一直是false 且在局部变量中,没有发现有问题啊,Model非常正常有木有,可是为什么 ModelState.IsValid 总是f ...

  2. 【406错误】 The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers.

    今天遇到一个奇怪的错误,关于Springmvc的,我明明在Controller方法中写了@ResponseBody,返回一个Map,结果报了406错误. 结果发现,少了一个jar包: 加上去就没事了.

  3. Latex学习笔记-序

    在写论文的过程中自学了$\LaTeX$, 想总结一下使用心得.刚开始整理了一下发现非常之乱,不知这么多零碎的知识该如何整理的有条理点,至少以后用到还能翻翻自己博客.这次写作论文图省劲用了IEEE的模板 ...

  4. Net设计模式实例之适配器模式(Adapter Pattern)

    一.适配器模式简介(Brief Introduction) 适配器模式,将一个类装换成客户期望的另外一个接口.Adapter模式使的原本由于接口不兼容而不能工作的那些类可以一起工作. 二.解决的问题( ...

  5. Block知识点总结

    block的作用 block用于保存一段代码 在适当的时候再使用  它是一种数据类型 block的定义格式: 返回值  (^block变量名)(形参列表) = ^(形参列表) { 需要执行的代码}; ...

  6. Nancy之Pipelines三兄弟(Before After OnError)

    一.简单描述 Before:如果返回null,拦截器将主动权转给路由:如果返回Response对象,则路由不起作用. After : 没有返回值,可以在这里修改或替换当前的Response. OnEr ...

  7. HTML5知识初级题目

    在 HTML5 中,onblur 和 onfocus 是: 在 HTML5 中,哪个元素用于组合标题元素? HTML5 中不再支持下面哪个元素? HTML5 中不再支持下面哪个元素? HTML5 之前 ...

  8. 万能的SqlHelper,麻麻再也不用担心用什么数据库了

    以前只用一种数据库,倒也无所谓,但是再数据库切换的时候,发现代码差不多呀. 最初,两种数据库,大不了写两个SqlHelper,但是多了也就发现代码重用率太低了吧. 因此,下面的SqlHelper诞生了 ...

  9. iOS阶段学习第32天笔记(页面传值方法介绍)

    iOS学习(UI)知识点整理 一.界面传值方法 1.方法一  Block传值  通过SubView视图的Block向View视图传值改变View视图的背景色 实例代码: 1)SubViewContro ...

  10. 【Java每日一题】20161209

    package Dec2016; public class Ques1209 { public static void main(String[] args){ People g = new Peop ...