小龙的博客

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

很多人估计会遇到这样的情况,在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">
本文标题:IFrame 根据嵌入页面自动调节大小
本文链接:https://xl.cndyun.com/post/370.html
作者授权:除特别说明外,本文由 admin 原创编译并授权 小龙的博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2018 小龙的博客 All Rights Reserved 
蒙公网安备 15020202000127号 蒙ICP备16000686号

分享:

支付宝

微信