window.postMessage在两个网页间传递数据

作者: 若水亦城空 | 来源:发表于2020-03-17 13:58 被阅读0次

window.postMessage在两个网页间传递数据
react-native WebVIew消息传递
react-native WebView 与 h5网页交互
Handler详解
跨域数据传递中遇到的问题
react-native与webview的通信
vuejs打开新窗口，窗口间通信
react-native webview 与js通信
Parcel
SpringMVC+Ajax+拼接html字符串

数据发送端

<template>
  <div class="add-interactive main-content">
    <div>
      <input type="button" value="发送" @click="sendPost()" />
      <iframe
        src="http://192.168.0.159/1111.html"
        id="otherPage"
        style="display:none"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "aaa",
  data() {
    return {
      timer: "",
      value: 0
    };
  },
  mounted() {
    this.timer = setInterval(this.get, 1000);
  },
  methods: {
    get() {
      // 监听跨域请求的返回
      window.addEventListener(
        "message",
        function(event) {
          console.log("返回值:  ", event.data);
        },
        false
      );
    },
    sendPost() {
      // 获取id为otherPage的iframe窗口对象
      var iframeWin = document.getElementById("otherPage").contentWindow;
      // 向该窗口发送消息
      iframeWin.postMessage(
        "dhjskahdjsahdskahdjskahd",
        "http://192.168.0.159/1111.html"
      );
      //let baseToken = store.getters.baseToken;
    }
  }
};
</script>

<style scoped lang="less">
@name: add-interactive;
</style>

数据接收端
sessionstorage （回话级别不行）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>POST Handler</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/JavaScript">
            window.addEventListener('message',function(event) {
                if(event.origin !== 'http://192.168.0.107:8100') return;
                localStorage.setItem('token',event.data)
                console.log('收到值:  ' + event.data,event);
                event.source.postMessage('返回登录信息',event.origin);
            },false);
        </script>
    </head>

    <body>
    
    </body>
</html>

出现 webpack 引起的请求问题

window.addEventListener(
      'message',
      function (event) {
        if (event.data.type !== 'webpackWarnings') {
          if (event.origin !== window.baseURL.postMessageUrl) return
          localStorage.setItem('authorization', event.data)
          console.log(event.data, 'event.data的值')
          //获取登录信息 （ 验证token 有效 ）
          LoginApi.getUserInfo({ params: { authorization: event.data } }).then(res => {
            console.log(res, '获取用户信息')
            if (res.code === 200) {
              // res.code === 200

              setUser(res.data)
              // 返回门户
              // var iframeWin = document.getElementById("app").contentWindow;
              event.source.postMessage('gongToken', window.baseURL.postMessageUrl)
            } else {
              event.source.postMessage('gongError', window.baseURL.postMessageUrl)
              // window.location.href = window.baseURL.zfwloginUrl
            }
          })
        }
        // event.source.postMessage('', event.origin)
      },
      false
    )