iframe-resizer iframe高度自适应问题

3、参考文档

https://github.com/davidjbradshaw/iframe-resizer/issues/523
https://jarontai.github.io/blog/2014/07/25/use-iframe-resizer/

2、嵌入文件 statement.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.contentWindow.js"></script>
    </head>

    <body>
        <div>111111</div>
        <div>111111</div>
        <div>111111</div>
    <!-- ... -->

</body></html>

注:引入 jquery.js
iframeResizer.contentWindow.js
不需做任何配置

3、主文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.contentWindow.js"></script>
</head>
<body>

<iframe id="iframe" scrolling="no"   style="border: 0px;overflow-y: scroll;" frameborder="0" width="100%" src="statement.html"></iframe>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.js"></script>
<script type="text/javascript">
   iFrameResize({
           log: true, // Enable console logging
           inPageLinks: true,
         })
</script>
</body>
</html>

注:script的位置 在body内最后,试发现在head内没效果

4、更多使用

见官方文档 示例 两个页面通讯问题

5、与vue整合

vue 引入iframe-resizer与引入jquery类似 参考
\build\webpack.base.conf.js

module.exports = {
 ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({  /*可以不用jquery*/
      jQuery: "jquery",
      $: "jquery"
    }),
    new webpack.ProvidePlugin({
      resizer: "iframe-resizer",   /*package.json中的名称*/
    }),
  ]
}

main.js中导入
import resizer from 'iframe-resizer'

组件中使用

    mounted () {
      console.log('mounted')
      console.log(" this.$refs.iframe", this.$refs.iframe)
      resizer.iframeResizer({log: true,}, this.$refs.iframe)
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 830评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 532评论 0 0
  • 大家好,我是IT修真院郑州分院第一期的学员胡嘉杰,一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下,修真院...
    ithinker5阅读 512评论 0 1
  • 数据结构与算法 栈和队列的区别 网络基础 HTTP 无状态怎么理解 可以从REST的角度来理解这个问题。我们知道R...
    笑极阅读 681评论 1 5
  • 自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网...
    布拉德皮蛋_qzy阅读 3,384评论 0 3