• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

window.postMessage

互联网 diligentman 1周前 (10-16) 11次浏览
不同源客户端两个页面之间的跳转实现

在10.11.888.32服务器上的index.html代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>-window.postMessage()跨域消息传递</title>
</head>
<body>
<button id="send" >发送消息</button>
<script>
    window.onload = function() {
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            var receiver = window.open('http://10.11.555.155/index.html');
            e.preventDefault();
            setTimeout(function(){
                receiver.postMessage("Hello ", "http://10.11.555.155/index.html");
            }, 1000);
        });
    }
</script>
</body>
</html>

在10.11.555.155服务器上的index.html代码

window.addEventListener('message',receiveHandle, false)
function receiveHandle(event){
  console.log(event);
  if(event.origin==="http://10.11.888.32"){
    alert('获取信息:'+ event.data);
  }
}

程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/10/window-postmessage/
喜欢 (0)