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

IFrame 根据嵌入页面自动调节大小

admin6年前 (2018-11-11)IT948

很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用IframeResizer脚本可以很好解决此问题,并且它是跨域名的,即使嵌入的是第三方页面,不需繁杂处理,几个步骤就可以使它自动调节宽度和高度。

1。首先下载iframe-resizer最新版本,现在是v2.5.2, 地址:

https://github.com/davidjbradshaw/iframe-resizer/zipball/master

2。在放Iframe的页面,引入iframeResizer.min.js脚本,并且进入如下初始化。

<script type="text/javascript">
          
              iFrameResize({
                log                     : true,                  // Enable console logging
                enablePublicMethods     : true,                  // Enable methods within iframe hosted page
                
                
            });
</script>

3。 添加的Iframe,还要进行如下设置,宽度设置成百分比,scrolling设成no .

如:

<iframe src="http://anotherdomain.com/frame.content.html" width="100%" scrolling="no"></iframe>

4。在被嵌入的页面,添加如下脚本.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="js/iframeResizer.contentWindow.min.js" type="text/javascript"></script>

5.为兼容IE8+,还要添加如下。

<meta http-equiv="X-UA-Compatible" content="IE=edge">


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

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

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

“IFrame 根据嵌入页面自动调节大小” 的相关文章

紧急阻止比特币病毒,教你关闭电脑135、139、445端口 ​

紧急阻止比特币病毒,教你关闭电脑135、139、445端口 ​

关闭445端口的方法! 方法一.使用360防黑加固 1.打开360主界面,点击右下方的“更多”选项; 2.在更多中搜索“防...

Linux服务器安装Apache/Nginx+MySQL+PHP

Linux服务器安装Apache/Nginx+MySQL+PHP...

Linux账号和权限管理

Linux账号和权限管理

要求:一,建立用户目录:创建目录/tech/benet和/tech/accp,分别用于存放各项目组中用户账户的宿主文件。步骤:如图所示:二,添加组账号:为两个项目添加组账号benet、accp,GID号分别设置为1001 、1002为技术部添加组账号tech,GID号设置为200步骤:如图所示:添加...

CentOS 系统执行 yum update 更新不升级系统内核

CentOS 系统执行 yum update 更新不升级系统内核

针对一般业务场景,建议不要自行升内核(涉及到内核存在重大安全漏洞场景除外)。如何在进行系统软件更新操作时,剔除系统内核的升级。本文对此进行简要说明。这里以 CentOS 6.5 为例来进行说明:1、首先打开 /etc/yum.conf 文件。2、然后在 [main] 后面加入以下两行代码,如下图所示...

云计算向公共资源演化之路

专题不断更新中,敬请期待! 来源:腾讯云...

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

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