iframe标签嵌入 网页传值

iframe标签嵌入 网页传值

项目1嵌入项目2，并传值
项目1：代码
html 页面标签 嵌入项目2地址 src=“https://ctcfile.com/dashboard/translate/document”

<el-button @click="sendMessage">发送消息</el-button>
 <iframe id="iframe" width="100%" height="100%" src="https://ctcfile.com/dashboard/translate/document" frameborder="0"></iframe>

mounted 中加上次方法，或者手动触动次消息发送

sendMessage() {
    let dom = document.getElementById('iframe');
    let data = {
      type: "sunther",
      token: ‘需要传值的token’
    };
    dom.contentWindow.postMessage(JSON.stringify(data), "https://ctcfile.com")
},

项目2中接收

  created() {
    this.getMessage();
  },

  methods: {
    getMessage() {
      window.addEventListener('message', ({ data = "" }) => {
        if (data) {
          let value = JSON.parse(data);
          if (value) {
            let { type = '', token = '' } = value;
            if (type === 'sunther') {
              console.log(token, "获取到token了");
            };
          };
        };
      });
    }
    }