vue中iframe的使用（1）

最新推荐文章于 2024-07-28 12:01:42 发布

Lucky_girl_wan

最新推荐文章于 2024-07-28 12:01:42 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lucky_girl_wan/article/details/128659600

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章展示了在Vue项目中如何通过iframe进行跨域通信，主要方法包括使用`postMessage`向iframe传递数据，并在iframe内部通过监听`message`事件来接收数据。示例代码详细说明了在父组件中设置iframe以及在子组件中接收数据的过程。

摘要由CSDN通过智能技术生成

1. 记录vue中使用iframe，直接上代码

父元素给iframe传值的方法

<template>
  <div>
      <iframe ref="iframeClass" src="https://xxxxxx/iframe-online-service" width="1000" height="700" frameborder="0"></iframe>
<button @click="testFun">测试</button>
  </div>
</template>

<script>
export default {
  mounted(){
    // 方法一
        const iFrame = that.$refs['iframeClass']
        iFrame.onload = function () {
          let data = {
            agentId: 'zzzz'
          }
          iFrame.contentWindow.postMessage(data, '*')
        }
  },
  methods: {
    // 方法二
    testFun(){
        const iFrame = that.$refs['iframeClass']
        let data = {
            agentId: 'zzzz'
          }
          iFrame.contentWindow.postMessage(data, '*')
        }
    }
}
</script>
<style lang="less" scoped>

</style>

iframe接收父元素传的值

<template>
  <div> iframe子元素 </div>
</template>

<script>
export default {
  mounted(){
      window.addEventListener('message', (e) => {
          const data = e.data
          console.log(e)
      })
  }
}
</script>
<style lang="less" scoped>

</style>