请选择 进入手机版 | 继续访问电脑版
热搜: | 激活| 时序| mos|
快捷导航 发布入口

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

[复制链接]
查看: 2792|回复: 2

565

主题

181

回帖

1633

积分

管理员

积分
1633
QQ
发表于 2021-2-4 17:18:02 | 显示全部楼层 |阅读模式 来自 湖南省 移动

很多人估计会遇到这样的情况,在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.               iFrameResize({
  3.                 log                     : true,                  // Enable console logging
  4.                 enablePublicMethods     : true,                  // Enable methods within iframe hosted page


  5.             });
  6. </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


温馨提示:本站无需登入,即可回复帖子,发帖和回复请勿涉及违法等行为!网罗天下电脑(wltxdn.com)
回复

使用道具 举报

3

主题

1万

回帖

1万

积分

VIP来宾

网站监管

积分
18289
QQ
发表于 2021-2-4 17:44:52 | 显示全部楼层 来自 Invalid
温馨提示:本站无需登入,即可回复帖子,发帖和回复请勿涉及违法等行为!
回复 支持 反对

使用道具 举报

3

主题

1万

回帖

1万

积分

VIP来宾

网站监管

积分
18289
QQ
发表于 2021-2-6 21:43:28 | 显示全部楼层 来自 Invalid
温馨提示:本站无需登入,即可回复帖子,发帖和回复请勿涉及违法等行为!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

精彩推荐

网罗天下让分享更简单

  • 反馈建议:admin@wltxdn.com
  • 工作时间:周一到周日 09:00-21:00
185-7316-8656

关注我们

Copyright   ©2018-2022  wltxdn Inc.  Powered by©Wltxdn  技术支持:网罗天下电脑    ( 湘ICP备2021015364号 )