如何通過 JavaScript 在兩個 html 頁面之間進行通信？

Question

假設我有兩個 html 頁面並在兩個選項卡中打開它們。 我想讓他們交流。 例如，當我單擊第一頁上的按鈕時，它應該調用一個在第二頁上執行某些操作的函數。

 function Test() { document.getElementById('test').innerHTML = "Test"; }

 <!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <button onclick="Test()">Click here</button> </body> </html>

第二頁：

 <!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <p id="test"></p> </body> </html>

當我單擊第一頁上的按鈕時，它應該在第二頁的p標記中寫入Test 。 它們可以使用相同的 JavaScript 文件。 但我怎樣才能做到這一點？

Answer 1

你不能只用 JavaScript 來做到這一點。 重點是：JS 是一種客戶端語言，這意味着它由客戶端（瀏覽器）下載並由它（而不是由服務器）運行。 為了讓 2 個頁面進行通信，您已經通過某種媒介以某種方式建立了通信。 介質可以是：

網絡本身。 2個客戶端可以直接通信，但前提是他們知道彼此的地址。 他們怎么會得到這些？ 通過服務器的幫助（這將我們帶到下面的第二個選項）或通過非常不切實際的手動配置（可以在 WebRTC 的上下文中找到更多詳細信息）
你的服務器。 好的，這是最常見的方法，但不僅僅涉及 JS：這需要一種服務器端語言（PHP、Python、C++、Java 等等）
你的瀏覽器。 有一種特殊情況，您可以建立這樣的通信：如果您在同一瀏覽器中以特殊方式從第一頁打開您的第二頁，以便第二頁“在”第一頁的“控制之下”，則您可以“命令”第二個從第一個做一些事情

所以，如果你對第三個選項感興趣，你應該閱讀window.open , window.opener , window.parent 。

var newWindow = window.open(url, name, params);

將打開一個新窗口（比如您的第二頁）並為您帶來一個變量newWindow ，它是對打開窗口的window對象的引用。 嘗試例如

newWindow.write("haha, I'm controlling this stuff!");

同樣，在第二個窗口中，您可以使用

var oldWindow = window.opener;

您還可以使用許多方法（ window``.close 、 .moveBy 、 .moveTo 、 .resizeBy 、 .resizeTo等）。

但是請記住，此交互將僅限於您的瀏覽器：如果您更改瀏覽器中顯示的內容（例如向頁面添加一些文本），這不會影響服務器上存儲的實際頁面，因為這需要您服務器通過一些服務器端腳本做一些事情。

PS 要推進這項技術，您可能需要閱讀window.postMessage但這主要是為跨域頁面之間的通信而設計的。

PPS 其實，還有更多！

需要注意的一件事是localStorage和sessionStorage有setItem方法，它在window上生成'storage'事件（嘗試localStorage.setItem('key', 'value');和window.addEventListener('storage', event => console.log(event.key)); )
另一個，就像安德森格林指出的那樣，是廣播頻道 API （嘗試const channel = new BroadcastChannel('my_channel') 、 channel.postMessage('Hi there!')和channel.addEventListener('message', event => console.log(event)) ）。
還有SharedWorker和Service Workers 。
最后，您可以使用一些現成的解決方案，例如tabs-router 、 Hermes 、 Visibility 、 Duel和SE 。

那些說俄語的人也可以在這篇文章中找到更多有用的細節（哇！）。

Answer 2

嘗試使用 cookie。 這是我能想到的最簡單的方法。 這個網站似乎有幫助： https : //www.w3schools.com/js/js_cookies.asp