在一个页面插入另一个页面、打开、嵌入一个页面、IFrame嵌入页面

admin

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

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

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

复制代码

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

1. <script type="text/javascript">
   
2. 
   
3.               iFrameResize({
   
4.                 log                     : true,                  // Enable console logging
   
5.                 enablePublicMethods     : true,                  // Enable methods within iframe hosted page
   
6. 
   
7. 
   
8.             });
   
9. </script>

复制代码

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

如：

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

复制代码

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

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

复制代码

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

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

复制代码

实例：

http://davidjbradshaw.com/iframe-resizer/example/

ps：引用地址：https://www.cnblogs.com/fanvy/p/3926763.html

735575740

温馨提示：本站无需登入，即可回复帖子，发帖和回复请勿涉及违法等行为！

735575740

温馨提示：本站无需登入，即可回复帖子，发帖和回复请勿涉及违法等行为！