我在网站和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>
现在，REMOTE网站在这里......
<!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
丹尼斯
答案 0 :(得分：2)
如果我理解你的问题，我相信当你调用window.open时，你需要做的就是命名你的窗口，然后在你的代码中使用这个引用，就像你在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);
});
答案 1 :(得分：1)
只能使用iFrame完成。
加载在iFrame中的页面充当代理，将消息事件转换为localStorage事件，反之亦然。
localStorage对于每个域都是独立的，这就是为什么它不能在两个不同的标签中实现的。