当前位置:首页 > IT > 正文内容

CSS完美实现iframe高度自适应(支持跨域)

admin7年前 (2018-02-24)IT962

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='" http://www.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">开头

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

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


扫描二维码推送至手机访问。

版权声明:本文由小龙的博客发布,如需转载请注明出处。

本文链接:https://xl.cndyun.com/post/226.html

“CSS完美实现iframe高度自适应(支持跨域)” 的相关文章

手动建站(Windows环境)

手动建站(Windows环境)

手动建站(Windows环境)更新时间:2016-11-23 16:28:41  本节介绍如何使用阿里云镜像,一键部署 Web 环境,包括安装 IIS 组件(不包括 FTP 组件)、PHP 环境、重定向 Rewrite、MySQL、phpwind。该示例不需要更换系统盘。部署之前,请确保您...

Typecho 1.0 Nginx 提示access denied的解决办法。

使用Nginx驱动typecho,刚安装后可以看到首页却不能访问管理登录或伪静态页面,找了好多方法包括修改:/usr/local/php/etc/php-fpm.conf  在后面加上一行:security.limit_extensions = .php .asmx .html .js&n...

PHP7.1升级

PHP7.1升级

经过一天的努力和技术研究,已经完成了3台服务器PHP7.1的升级,升级后的确速度快了好多!有一台服务器因大部分程序可能有兼容性问题且为了为后期无法使用PHP7的程序做准备暂不升级,另两台搭建网站不多,也会后期根据情况升级或换windows系统。...

小龙的博客首个app上线

小龙的博客首个app上线

小龙的博客首个app上线APP 0.0.1 版下载地址:http://app.wlong.pw/dblog/DBlog1.apkAPP 0.0.1 加固版下载地址:http://app.wlong.pw/dblog/DBlogW1.apk...

升级优化公告20170906

2017年9月4日app上线取消了首页音乐自动缓存机制,减少流量损耗优化视频代码使视频可以自适应屏幕大小对视频网站链接做CDN HTTPS加速,同时添加视频防盗链实现视频播放可拖拽,高速访问...