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

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

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

    数据发送端

    <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
        )
    
    

    相关文章

      网友评论

          本文标题:window.postMessage在两个网页间传递数据

          本文链接:https://www.haomeiwen.com/subject/tcoujhtx.html