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

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

admin6年前 (2018-11-11)IT983

很多人估计会遇到这样的情况,在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 根据嵌入页面自动调节大小” 的相关文章

网站HTTPS升级方法

网站HTTPS升级方法

最近在做网站SSL升级,看似简单的操作还是会遇到各种问题,现在和大家分享一下。证书申请:公司是创业公司,为了省成本准备申请免费证书,对比了一些证书商,最后选择使用沃通wosign提供的证书服务,发现有不同配置的证书可以选择:EV SSL: 扩展验证型SSL(Extended Validation S...

浅谈腾讯云万象优图1

浅谈腾讯云万象优图1

1. 体验与说明1.1 开发准备开发者使用OCR功能之前,需要先注册腾讯云账号,并创建图片空间,添加密钥,具体操作步骤如下:1) 前往腾讯云•万象优图控制台注册账号;如果已经注册账号,请跳过此步骤;2) 在腾讯云•万象优图控制台创建一个图片空间,获取空间名称(bucket)和项目ID;如果已创建过图...

比特币勒索病毒救星来了

比特币勒索病毒救星来了

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

全国各省网站ICP备案一览表

全国各省网站ICP备案一览表

简称省 份备案所需要的基本材料能否正常备案特殊要求核验点AH安徽营业执照(或身份证)、核验单、带幕布的核验照安徽备案注意事项:1.备案域名所有者须与主办者一致,企业备案时域名所有者可以是单位法人或者网站负责人;2.备案期间请关闭域名的whois保护,不能核对所有者的备案将被退回;查看BE湖北营业执照...

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

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

升级优化公告20170916

优化首页常驻图片内容为webp格式大大加少了首页体积增加在线交流模块优化app开启速度麦兜H5网、麦兜生活圈入驻首页,加入app访问优化调整麦兜H5网适配app...