zoukankan      html  css  js  c++  java
  • window.postMessage安全地实现跨源通信

    window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机  (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

    从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数(比如 message )将通过消息事件对象暴露给接收消息的窗口

    otherWindow.postMessage(message, targetOrigin, [transfer]);

    例如:vue项目中,调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。

    父页面代码:

    <body>
    <h1>我是父页面</h1>
    <iframe src="http://127.0.0.1:5050" frameborder="0" style="height: 100%; 100%"></iframe>
    <script>
    function fatherFunction() {
    alert('我是父页面中的方法!')
    }
    window.addEventListener('message', function(e){
    console.log(e) //{data:'params'}
    fatherFunction()
    })
    </script>
    </body>

    子页面代码:

    <template>
    <div class="weather-app" :class="currentWeatherBG">
    <button @click="test">我是子页面按钮,点击调用父页面方法</button>
    </div>
    </template>
    <script>
    export default {
    methods: {
    test() {
    window.parent.postMessage({
    data :"params"
    },'*');
    },
    }
    }
    </script>


    可以看到,这里关键是子页面通过postMessage方法实现的通信,postMessage的使用方法为:

    otherWindow.postMessage(message, targetOrigin, [transfer]);
    message为需要传递的信息,
    targetOrigin为指定哪些窗口能接收到消息事件,可以为’*’,但是这样很不安全,建议根据实际项目精确匹配。

    而父页面则只需要添加事件监听器,在回调中执行需要执行方法或者使用参数。

    window.addEventListener('message', function(e){
    console.log(e) //{data:'params'}
    fatherFunction()
    })

  • 相关阅读:
    设计模式:访问者模式
    设计模式:模板模式
    三分法——求解凸性函数的极值问题——czyuan原创
    素数&&Miller_Rabbin
    【算法入门】深度优先搜索(DFS)
    快速幂取模
    hrbeu1280Turn the corner
    hdoj_3400Line belt
    【专题】三分法和牛顿迭代法总结
    zoj_3203Light Bulb
  • 原文地址:https://www.cnblogs.com/baixiaoxiao/p/15403161.html
Copyright © 2011-2022 走看看