postMessage
如果你正在寻找一种方法来制作两个pages or tabs沟通你可以看一下：
MDN Window.发布消息 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage，并阅读此内容发布消息 article http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
or MDN 广播频道API https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
使用广播频道 API page1 http://jsbin.com/fuqebuk/1/ — page2 http://jsbin.com/vitefud/2/
怎么运行的：
-
pageX订阅一个命名的广播频道对象
-
pageY使用广播到相同的频道名称
postMessage
-
pageX听
"message"事件并打印Event.data
And 反之亦然.
第1页.html
<h1>PAGE 1</h1>
<p><button data-broadcast="Page 1 talking!">BROADCAST</button></p>
Page 2 says: <div id="page2"></div>
<script src="comm.js"></script>
page2.html
<h1>PAGE 2</h1>
<p><button data-broadcast="Page 2! 'Allo 'Allo!">BROADCAST</button></p>
Page 1 says: <div id="page1"></div>
<script src="comm.js"></script>
comm.js
var bc = new BroadcastChannel('comm');
document.querySelector("[data-broadcast]").addEventListener("click", ev => {
bc.postMessage( ev.target.dataset.broadcast );
});
const targetEl = document.querySelectorAll("#page1, #page2");
bc.addEventListener("message", ev => {
[...targetEl].forEach( el => el.innerHTML = ev.data );
});
localStorage和storage Event
Another simple, yet cool way, if both tabs are on the same domain is by using
Window.localStorageMDN https://developer.mozilla.org/en-US/docs/Web/API/Storage and its Storage Event.
怎么运行的：
-
pageX写信给
localstorage[pageX]
-
pageY's
window将触发一个storage event
-
pageY现在可以阅读
localstorage[pageX]或更好（以使其更简单（并且pageN不可知论者））Event.newValue由存储事件发送
And 反之亦然.
对于初学者： DEMO: page1 http://jsbin.com/hapifef/2/ — page2 http://jsbin.com/yemurul/1/
第1页.html
<h1>PAGE 1</h1>
<textarea data-sender="page1" placeholder="Write to page 2"></textarea>
Page 2 says: <div id="page2"></div>
<script src="comm.js"></script>
page2.html
<h1>PAGE 2</h1>
<textarea data-sender="page2" placeholder="Write to page 1"></textarea>
Page 1 says: <div id="page1"></div>
<script src="comm.js"></script>
comm.js
// RECEIVER
window.addEventListener("storage", ev => {
document.getElementById( ev.key ).innerHTML = ev.newValue;
});
// SENDER
[...document.querySelectorAll("[data-sender]")].forEach( el =>
el.addEventListener("input", ev => localStorage[el.dataset.sender] = el.value )
);
Web RTC
你可以使用Web RTC https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API（网络实时通信）。一种使 Web 应用程序和站点能够捕获和可选地stream音频和/或视频媒体，以及在浏览器之间交换任意数据
你的主要错误：
您的脚本无法在一页上运行...实际上在both，唯一的区别是在第 1 页上意识到后就断了#page2无法找到元素 - 相反，在另一页上意识到没有元素后立即崩溃"#page1"元素（从第一个开始）。
您应该始终使用以下命令检查 al 元素是否存在if ( someElement ) { /*found!*/ } .
是的，你不能让交流就这样两页。他们只会共享/包含相同的 JS 文件。
