项目集成时使用iframe传值

项目场景：

提示：这里简述项目相关背景：

项目场景：当一个项目需要很多第三方项目集成在一起时，使用iframe将前端页面引入到项目中去

---

问题描述

提示：这里描述项目中遇到的问题：

例如：iframe使用url传参会刷新，重新加载子页面

---

解决方案：

提示：直接上代码

1. 父页面

<template>
  <div id="app">
    <button @click="send(1)">向iframe嵌套的子页面传-1</button>
    <button @click="send(2)">向iframe嵌套的子页面传-2</button>
    <button @click="send(3)">向iframe嵌套的子页面传-3</button>
    <iframe ref="iframe"
            :src="src"
            class="iframe"
            frameborder="0"
            scrolling="yes"
            name="iframe"
            seamless>您的浏览器版本过低，无法显示报表内容！建议升级浏览器或更换浏览器！</iframe>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      src: 'http://localhost:8082/home'
    }
  },
  mounted () {
    const mapFrame = this.$refs.iframe;
    const iframeWin = mapFrame.contentWindow;
    if (mapFrame.attachEvent) {
      // eslint-disable-next-line
      mapFrame.attachEvent('onload', function () {
        iframeWin.postMessage(
          {
            //定义接收方法，方便精准接收
            iframeClick: 'getParams',
            params: {
              //传递的值
              key: '初始值传递'
            },
          },
          '*',
        );
      });
    } else {
      // eslint-disable-next-line
      mapFrame.onload = function () {
        iframeWin.postMessage(
          {
            iframeClick: 'getParams',
            params: {
              key: '初始值传递'
            },
          },
          '*',
        );
      };
    }


  },
  methods: {
    send (key) {
      const mapFrame = this.$refs.iframe;
      const iframeWin = mapFrame.contentWindow;
      iframeWin.postMessage(
        {
          iframeClick: 'getParams',
          params: {
            key
          },
        },
        '*',
      );
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 子页面

<template>
  <div>home{{key}}</div>
</template>
<script>
export default {
  data () {
    return { key: '' }
  },
  mounted () {
    window.addEventListener('message', event => {
      console.log(event)
      const data = event.data
      switch (data.iframeClick) {
        case 'getParams':
          this.key = data.params.key // 这样就拿到了vue传过来的params
      }
    })
    console.log('+++++++')
  }
}
</script>

以上代码参考地址：https://www.cnblogs.com/dupenghui/p/13954056.html vue项目使用iframe嵌入另一个vue项目的页面

遗留问题：

提示：这里描述项目遗留问题追踪：

主要咱也不知道有啥后遗症，会不会有安全隐患，欢迎积极留言，不定时更新