两个窗口或选项卡之间的跨文档消息传递，而不是iframe

Cross-Document Messaging between two windows or tabs, NOT IFrames

本文关键字：消息传递 文档 iframe 之间 两个 窗口 选项      更新时间：2023-09-26

我已经在站点和iframe之间组合了一个跨文档消息传递实现。效果很好。但是我希望在制表符之间通信，而不是iframe。

这是我的代码，为两个部分的iframe通信。第一个是母版页，另一个是远程或从页。

所以，MASTER页在这里…

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Cross-Document Messaging Receiver</title>
 <!-- <script type='text/javascript' src='js/xDocMess.js'></script> -->
 <link rel="stylesheet" type="text/css" href="css/xDocMess.css"> 
 <script type="text/javascript">
    function sendMessage() {
        //select the iframe containing the message receiver remote script
        var remoteframe = document.getElementById("remotepage");
        //Get the users message from the message input box
        var message = document.getElementById("message").value;
        //Check that the message is not blank
        if (message !== "") {
        remoteframe.contentWindow.postMessage(message, 'http://localhost:8081');
        }
        else {
             alert("You cannot send a blank message!");   
        }
    }
 </script>
</head>
<body>
 <h1>Cross-Domain Messaging Example</h1>
 <div id="controls">
     <label>Enter your message to be sent to the iframe: </label>
     <input type="text" id="message" />
     <button id="sendmessage" onclick="sendMessage();">Send Message</button>
     <p>(Note: Only alphanumeric characters will be printed!)</p>
 </div>
 <h3>Remote Script iframe</h3>
 <iframe id="remotepage" src="http://localhost:8081/remote.html"></iframe>
</body>

现在，远程站点在这里…

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Remote Receiver</title>

 <link rel="stylesheet" type="text/css" href="css/normalize.css">
 <style type='text/css'>
   body {
   font-family: sans-serif; 
   padding: 10px;    
   }
   h3 {
       padding-bottom: 5px;
   }
   #messages {
    font-size: small;
    border-top: 1px solid #000;
    padding-top: 10px;          
   }
 </style>
 <script type='text/javascript'>//<![CDATA[ 
  window.onload=function(){
    function receiver(message) {
    //get the message container html element (in this case, the messages div)
    var messagecontainer = document.getElementById("messages");
    var trusteddomain = "http://localhost:8081";
    //Get the time of message receipt
    var currenttime = new Date();
    //format the time into a user readable format
    var formattedtime = currenttime.getHours() + ":" + currenttime.getMinutes() + ":" + currenttime.getSeconds();

    var msgcontent = message.data;
    //check the content of the message only contains letters and numbers to prevent xss attacks
    if (msgcontent.match(/^[A-Za-z0-9]+$/)) {
        messagecontainer.innerHTML += "message received @ " + formattedtime + ": " + message.data + "<br />";
    } else {
        messagecontainer.innerHTML += "Illegal characters found in the message received @ " + formattedtime + ". Message rejected<br/>";
    }
   }
  }
  </script>
</head>
<body>
  <h3>Messages Received:</h3>
  <div id="messages"></div>  
</body>
</html>

解决方案在于如何调用window.open而不是在MASTER: <iframe id="remotepage" src="http://localhost:8081/remote.html"></iframe>中调用IFRAME并改变sendmessage代码行:var remoteframe = document.getElementById("remotepage");并且能够将消息传递到窗口。我脑子里有个障碍……

如有任何帮助，我将不胜感激。

TIA

丹尼斯

如果我理解了你的问题，我相信你所需要做的就是在调用window时命名你的window。打开并在代码中使用这个引用，就像使用iframe的contentWindow一样:

var myWindow = window.open('newTab.html');
myWindow.postMessage('You''re a nice looking window', 'http://yourtargetdomain.com');

然后将'message'处理程序放入newTab.html文档

window.addEventListener('message', function (event) { 
    // security check ...
    console.log('message: ' + event.data); 
});

只能使用iFrame。

Page，加载在iFrame中，充当代理，将消息事件转换为localStorage事件，反之亦然。

localStorage对于每个域是单独的，这就是为什么它不能在两个不同的选项卡中实现。

相关文章：