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. cuda学习笔记——deviceQuery

    main(int argc, char **argv):argc是参数个数,**argv具体的参数,第0个是程序全名 cudaError_t类型:记录cuda错误,值为cudaSuccess则正确执行 ...

  2. spring-AOP-ProxyFactoryBean代理的实例

    1.一个代理模式的实例 通过 Proxy类进行代理 wait.java //定义一个接口 public interface wait { void say(); } //目标对象实现接口并重写方法 p ...

  3. laravel框架中所用到的依赖注入

    用Laravel开发前前后后有2个月左右了,之前一直写Java,就像找到Java和PHP之前的共同点,用Java的某些原理去理解PHP会发现还是有很多共通之处的.Java的依赖注入已经是一个很常见的概 ...

  4. 开发检测MySQL主从同步插件

    Nagios的状态码 OK 退出码0,表示正常工作 WARNING  退出码1,表示处于警告阶段 CRITICAL    退出码2,表示处于紧急状态,严重状态 UNKOEN   退出码3,表示无法获取 ...

  5. Linux 下安装 Memcached 和 PHP 开启 Memcached 扩展

    [项目背景]:阿里云ECS服务器,Linux(centos7.2 64位),环境部署使用的是阿里云一键安装包(LAMP)等 [项目需求]:linux安装memcached 和php开启Memcache ...

  6. 【Flex】读取本地JSON，然后JSON数据转成XML数据

    package utils { import flash.xml.XMLDocument; import flash.xml.XMLNode; import mx.rpc.xml.SimpleXMLE ...

  7. vuejs学习笔记（2）--属性，事件绑定，ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  8. C语言常见错误笔记

    1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...

  9. 设计模式(四)—观察者模式

    一.概述      观察者模式类似于邮件订阅和RSS订阅,当我们浏览一些博客或wiki时,经常会看到RSS图标,就这的意思是,当你订阅了该文章,如果后续有更新,会及时通知你.其实,简单来讲就一句话:当 ...

  10. HNOI2017前被虐记及感悟

    本文所记录的时间以HNOI2017第一天考试时间为DAY1,前一天为DAY0,以此类推. 本文记载了博主从HNOI2017开始前一周进行全真模拟考试的被虐过程和结果.文章内可能包含博主的不良情绪,如果 ...