Iframe的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域Iframe等诸多问题，尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行的方案（唯一有一种提到加入代理页面的，经过测试发现无用）。难道真的没有一种可行的解决方案了吗？ No，下面小鸣子和大家分享一种强大的方法，代码如下：

<html>
<head>
<style>
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
</head>

<body>
<iframe src=\'#\'" //hi.baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe>

</body>

</html>

代码强大之处：

1. 该方法完美兼容IE6，7，8 ，Fire fox,chrome，opera 等主流的浏览器；

2.同域，跨域皆支持；

3.不调用任何JS脚本；

注意三点.

1. 文件开头不能是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

必须 是<html>开头

2. body样式中的 overflow: hidden; 绝对不对省略；

3.Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes，不用设置即可)

好了，马上试试吧。100%不会让你失望。

CSS完美实现iframe高度自适应（支持跨域）的更多相关文章

  1. iframe高度自适应（同域）

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

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

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

  3. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

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

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

  5. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

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

  6. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  7. Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  8. Iframe 高度自适应 example （跨子域实现）

    跨子域的iframe高度自适应 比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/',这种跨子域的页面,实现起来也比较简单 ...

  9. 跨子域的iframe高度自适应

    一.跨子域的iframe高度自适应 比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面 3.html 1 2 3 4 5 6 7 8 9 10 11 ...

随机推荐

  1. iPhone safari中Document事件不触发的解决方案 [冒泡]

    写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){   //隐藏代码  }); 各大浏览器都没问题,唯独iPhone上的不会触发事件 ...

  2. 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger

    spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...

  3. Object-C定时器,封装GCD定时器的必要性!!! (二)

    上一篇:Object-C定时器,封装GCD定时器的必要性!!! (一) 上一篇认识了Object-C中的几种定时器,这一篇将Dispatch定时器(GCD定时器)封装起来. p.p1 { margin ...

  4. 【转】一个小工具类，利用shareObject把数据缓存

    原文链接:http://bbs.9ria.com/thread-284082-1-2.html 之前做一个数据缓存,就顺便把写入缓存,清除缓存,获取缓存都整理了一下,其中也做了些参考,个人水平有限,有 ...

  5. 老李分享：SSL协议相关证书

    老李分享:SSL协议相关证书   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  6. Android中的java层的线程暂停和恢复实现

    /**  * 基础线程对象.  *  * @author jevan  * @version (1.0 at 2013-6-17)  * @version (1.1 at 2013-7-2) 增加on ...

  7. JavaScript中数组类型的属性和方法

    除了Object,Array类型应该是ECMAScript中最常用的类型了. ECMAScript的数组虽然也是数据的有序列表,但还是与其他语言中的数组有很大的区别.比如ECMAScript数组每一项 ...

  8. 极化SAR图像基础知识(2)

    本篇主要关注物理含义 1.极化 电磁波在传播时,传播的方向和电场.磁场相互垂直,我们把电波的电场方向叫电波的极化.(i.e.依据电场E的方向来定义电磁波的极化). 如果电场矢量端点随时间变化的轨迹是一 ...

  9. FineUIMvc

    FineUIMvc 在线示例源代码下载(包含上面列出的全部 50 种主题,基础版可以免费使用) FineUIMvc 在线示例 FineUI 官网首页

  10. less学习笔记（二）

    1.作用域:基本与javascrip的作用域相似,即先找局部变量,后找全局变量.找变量时遵循就近原则. 2.条件表达式:.mixin (@a) when (lightness(@a) >= 50 ...