• 用iFrame Resizer解决iframe高度自适应问题


    最近工作中需要对一个旧项目进行改造,不得已使用了让人头疼的iframe,碰到的最大问题是没有好的方法使其高度自适应。Google一番之后,发现iframe-resizer能够比较好的解决这个问题,而且还支持跨域访问(使用postMessage)。

    在使用它之前,必须明确iframe resizer要求IE8+(firefox,chrome等自然没有问题),如果你需要支持旧版本IE,请关掉本页然后再去google。其次,iframe resizer提供了原生JS与jQuery插件两种调用方式,而原生方式需要额外的配置,所以我推荐选择jQuery插件方式(毕竟jQuery几乎是标配了)。


    OK,下载iframe resizer。

    在iframe resizer压缩包的js文件夹中,有两个文件: 第一个js是:iframeResizer.min.js。这个js是要放在需要嵌入iframe的页面(parent)中,其调用方式如下(一般情况下你不需要传递任何参数即可实现高度自适应,详细参数请参考官网):

    $('iframe').iFrameResize([{log: true}]);

    第二个js是:iframeResizer.contentWindow.min.js,它需要放到你的iframe页面(child)中去,注意只要引人,不需要代码配置。


    接下来是设置iframe,需要注意的是width必须是百分比,scrolling设置为no(为了兼容性)。

    <iframe src="http://jarontai.github.io/blog/2014/07/25/use-iframe-resizer/"http://yourserver.com/index.html" width="100%" scrolling="no"></iframe>

    当然,你也可以使用document.createElement来动态创建它。

    var iframe = document.createElement('iframe'); iframe.setAttribute('src', 'http://yourserver.com/index.html'); iframe.setAttribute('width', '100%'); iframe.setAttribute('scrolling', 'no'); document.body.appendChild(iframe);

    按照以上步骤设置,基本上就能够解决iframe自适应问题,且iframe内容可跨域。

  • 相关阅读:
    数据库中的左连接(left join)和右连接(right join)区别
    ajax提交form表单资料详细汇总
    javaScript 删除确认实现方法总结分享
    web.xml文件配置详解以及实例说明
    java时间处理工具类--DateUtils
    Oracle安装后忘记用户名或密码+创建新登陆用户
    zabbix server 端安装
    zabbix 介绍
    nginx + uWSGI 为 django 提供高并发
    nginx-1.10.3 编译安装
  • 原文地址:https://www.cnblogs.com/espcms/p/7445400.html
Copyright © 2020-2023  润新知