vue使用iframe方法

发表于 | 分类于 | | 阅读次数:
字数统计: 188 字 | 阅读时长 ≈ 1 分钟

vue使用iframe的方法和数据通信

使用

  1. 将需要引入的html和js等放在项目根目录下的static文件夹下

  2. 引入iframe

    1
    <iframe :src="iframeSrc" frameborder="0" width="660" height="600" ref="iframe"></iframe>
    1
    iframeSrc: '/assets/previewFile.html'

    注意使用绝对路径，且路径为打包后的二级目录。事实上是用webpack插件将static目录下的文件复制到打包后的二级目录。

  3. 分别在webpack.dev.conf.js和webpack.prod.conf.js里配置插件

    1
    2
    3
    4
    5
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.dev.assetsSubDirectory,
      ignore: ['.*']
    }])

通信

在父中，使用postMessage发消息

1
2
3
4
5
6
7
8
9
10
this.$refs.iframe.contentWindow.postMessage(
  {
    cmd: 'getFormJson',
    previewUrl: this.previewUrl,
    params: {
      previewUrl: this.previewUrl
    }
  },
  '*'
);

子（html）中，接收数据

1
2
3
4
5
let previewUrl='';
window.addEventListener("message", function(event){
  previewUrl=event.data.previewUrl
  // 其他操作
}