Fatal编程技术网
  • javascript/
  • Javascript 在两个页面/选项卡之间进行通信

Javascript 在两个页面/选项卡之间进行通信

javascript html

Javascript 在两个页面/选项卡之间进行通信,javascript,html,Javascript,Html,我想要一个JavaScript文件来同时控制两个HTML文件 <!DOCTYPE html> <html> <head> <title>tryAgainPage1</title> <meta charset="UTF-8"> </head> <body> <div id="page1"></div> <scrip

我想要一个JavaScript文件来同时控制两个HTML文件

<!DOCTYPE html>
<html>
<head>
  <title>tryAgainPage1</title>
  <meta charset="UTF-8">
</head>
<body>

  <div id="page1"></div>

  <script src="tryAgain.js"></script>
</body>
</html>
第一页有效，第二页无效。我花了一天的时间试图让pages互相交谈，但没有成功。我不确定我是否理解如何在这种情况下实现广播频道（如果确实合适的话）。有人能帮忙吗？

两个页面都抛出了一个错误，不同的是，在第一个页面上，直到更改div之后错误才会发生

这里有一种可能的方法

newFunction();

function newFunction() {
  var page = document.getElementById("page1") ? "1" : "2";
  var msg = page == "1" ? "page one says hello" : "page two says goodbye";
  document.getElementById("page"+page).innerHTML = msg;
}

postMessage
如果您正在寻找使两个页面或选项卡进行交流的方法，您可以查看：
，并阅读此
或

使用广播频道API-

工作原理：

  • pageX订阅命名的广播频道对象
  • pageY使用
    postMessage
  • pageX侦听
    事件的“消息”
    并打印
    事件。数据
反之亦然

页面1.html

localStorage
和
storage
事件 如果两个选项卡都在同一个域上，另一个简单但很酷的方法是使用
及其
存储事件

工作原理：

  • pageX写入
    localstorage[pageX]
  • pageY的
    窗口将触发
    存储
    事件
  • pageY现在可以读取存储事件发送的
    事件。newValue
反之亦然

对于初学者：演示：-

页面1.html

网络实时通信 您可以使用（Web实时通信）。一种技术，使Web应用程序和网站能够捕获和可选地流式传输音频和/或视频媒体，以及在浏览器之间交换任意数据

您的主要错误： 您的脚本无法在一页上运行。。。实际上，在这两个上，唯一的区别是，在第1页上，在意识到
#page2
元素后无法找到，相反，在另一页上，在意识到没有
“page1”
元素后立即断开（从第一顺序开始）。
您应该始终使用
if（someElement）{/*found！*/}
检查al元素是否存在

是的，你不能用这种方式进行两页的交流。他们将只共享/包含相同的JS文件。

document.getElementById（“page1”）.innerHTML=“第一页说你好”在没有
page1
元素的页面上是一个错误。错误会导致脚本的其余部分中止，从而使其他行无法运行。不过，您的脚本与两个选项卡之间的通信无关。这只是一个脚本，两个选项卡在每次加载时都会运行。如果你需要标签来交流，你可能想看看这个：你的最终目标并不完全清楚。您提到和页面彼此“交谈”，但您的示例似乎只是一个单独的JS文件，用于与多个页面进行交互。我的最终目标是在一个页面上使用用户输入，并同时在另一个页面上显示，这确实会使单个JS文件在两个不同的页面上工作，但这与两页“交谈”并不相同。你是对的，但这并不能回答问题。问题是关于同一浏览器中两个选项卡之间的通信（因此有两个页面）。@RaphaMex这是一个很好的假设，但仍然是一个假设。尽管有人要求澄清，OP并没有透露任何关于这个问题的信息。嗨，我抓到了一只熊。我的目标是创建一个包含控制器输入的“控制器”页面（表1），然后将数据发送到“用户页面”（表2）。您的答案很好。然而，问题是关于@RaphaMex thx的使用，我从OP的Q中注意到。它只是花了一些时间来扩展。我如何访问发送的数据广播消息中的文本，因为我想更改它的内容？尝试对其进行标识并使用innerHTML是行不通的。我应该补充一点，数据广播消息的内容将由用户从输入框中生成。@nooby只需使用
ev.data
。如果您想找到可以访问的内容，请尝试
console.log（ev）
并浏览返回的对象。使用
而不是
按钮，单击
而不是
使用
输入
事件。您可以在第二个示例中找到大部分底层逻辑。把两者混合起来：）

newFunction();

function newFunction() {
    document.getElementById("page1").innerHTML = "page one says hello";
    document.getElementById("page2").innerHTML = "page two says goodbye";
}



newFunction();

function newFunction() {
  var page = document.getElementById("page1") ? "1" : "2";
  var msg = page == "1" ? "page one says hello" : "page two says goodbye";
  document.getElementById("page"+page).innerHTML = msg;
}



<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>



<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>



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 );
});



<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>



<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>



// 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 )
);