在没有窗口参考的选项卡dom之间进行通信[重复]答案

【问题标题】：Communicate between tabs dom without window ref [duplicate]在没有窗口参考的选项卡dom之间进行通信[重复]
【发布时间】：2017-02-28 06:14:14
【问题描述】：

我使用以下内容打开包含一些页面内容的新选项卡（在新进程中），

var p = document.getElementById("myElement"); 
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();

http://news.softpedia.com/news/Force-Google-Chrome-to-Open-Links-in-New-Processes-128962.shtml

这正在工作，新标签页已打开，其中包含 myPage.html 内容。

假设这是 myPage（仅用于示例...）我应该如何访问它？

<!DOCTYPE html>
<html>
<body>

<h1> Heading</h1>
<p> paragraph.</p>
 <button type="button">Click Me!</button>

</body>
</html>

现在让我们进入棘手/高级:)部分...

当你使用window.open（我不能使用）这很简单，因为你可以使用各种技术。

 1. using window object
 2. post message
 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
 3. cookies 
 4. localStorage

但在这里我打开这个新页面时没有使用 window.open 获得的参考

我的问题是：

如果我想更改某些内容，如何访问这个新的标签 dom

【问题讨论】：

嗨，我在发帖前给你 +1 搜索
@MarnyA.López - 谢谢 :)
我希望您对同源策略没有任何问题。 1）任何页面都可以是“父”吗？ 2）您需要双向发送消息吗？（父母 -> 孩子或孩子 -> 父母）
@fremail - 目前我没有域问题...我需要从“子选项卡”向“父选项卡”发送消息，如果您有想法请提供一些示例，谢谢！
你说你不能使用window.open API然后说你根本不能使用window？怎么会？要求避免 XY...

标签： javascript html google-chrome service-worker

【解决方案1】：

父页面 JavaScript：

var lastMessage;
setInterval(function() {
  var message = localStorage.getItem('message-to-parent');
  if (message && message !== lastMessage) {
    lastMessage = message;
    // your code here
    alert('There is a new message for you: ' + message);
  }
}, 100);

子页面 JavaScript：

localStorage.setItem('message-to-parent', 'hello, my parent!');

如果你有很多动画和其他巨大的JS代码，我建议增加定时器间隔，或者更好地解决问题window。

【讨论】：

谢谢，这个解决方案将如何在浏览器中执行，我的意思是从性能或负载...
@JohnJerrby 计时器将添加一个作业（回调函数）来检查消息，延迟为 100 毫秒，但问题是该作业可能会晚于 100 毫秒运行。在此处阅读更多关于 JS 计时器的信息ejohn.org/blog/how-javascript-timers-work 如果您使用 100 毫秒或更长的延迟并且间隔的回调函数很简单（如我的代码），您可能对性能保持冷静。
谢谢！，我不确定我是否可以使用此解决方案，因为它不可靠...（正如您发布的链接所说...），您认为我可以使用其他解决方案吗？
@JohnJerrby 您是否尝试使用此解决方案？ stackoverflow.com/a/28230846/3816979
我读了这篇文章（我在我的问题上放了一个链接）但是有一个窗口 $(window).on('storage', message_receive); , 有一种方法可以将它绑定到其他东西上吗？如果这样可以很好，我可以使用它...

【解决方案2】：

我遇到了类似的问题，并构建了一个小型库，以通过 localStorage 进行函数调用，并可以使用参数。你可以找到它here。目前并非所有 browsers 都支持 Service Worker。

这是一个如何使用它的示例：

//Register a function: 
RegisterLocalStorageFunction("test", function(param){ 
    return param+param; 
});

//Call a function: 
let str = "testing"; 
CallLocalStorageFunction("test",str,function(para){ 
    console.log(para); 
});

在您的上下文中：

RegisterLocalStorageFunction("CallAlert", function(param){ 
    alert(param);
    return "Success"; 
});
var p = document.getElementById("myElement");
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();

在您的另一个窗口中：

<!DOCTYPE html>
<html>
<body>
<h1> Heading</h1>
<p> paragraph.</p>
<button type="button" onclick="btnClick()">Click Me!</button>
<script>
    function btnclick(){
        CallLocalStorageFunction("CallAlert","Hello from the other tab",function(para){ 
            console.log("para"); 
        });
}
</script>
</body>
</html>

双方必须在同一个域，否则无法访问同一个localStorage。 ~~使用我在 github 上的当前代码，我使用 setInterval 在存储中循环。~~ 有一个storage event，它会被触发到所有其他选项卡和窗口，但不会触发到同一个选项卡。 ~~我将重写库以对事件使用更简洁的方法，但现在这应该可以解决问题。~~

更新

在存储库中，您可以找到基于 'storage' 事件的 communicator2。

更新

Here 是托管的工作示例。请记住允许弹出窗口。

【讨论】：

谢谢，如果您能在我的上下文中举例说明，如果您需要其他信息...谢谢！
谢谢 :)，我现在试试，让你知道...
没问题，我推荐版本 2。如果您有任何问题，请告诉我。
谢谢，但我不能使用版本 2，因为你使用那里的窗口，我没有窗口对象，因为我使用 a.setAttribute('href',".../mypage.html"); a.setAttribute('rel',"noreferrer"); a.setAttribute('target',"_blank");但也许我想念一些……
是的，但是由于我们在使用本地存储时遇到了一些安全问题，我正在尝试检查是否可以使用从安全方面更好的 sessionStorage，如果您知道如何使其与会话一起使用存储请告诉我。非常感谢！

【解决方案3】：

您必须在触发 click 事件之前附加一个 DOMNodeInserted-listener，然后您才能访问此窗口对象。

// assuming that all inserted alements are links or a-tags
// this code must run before the code that adds the a-element
document.addEventListener("DOMNodeInserted", function (ev) {
      var link = ev.target;
      var oldRef = link.href;
      link.onclick = function(event){
        event.preventDefault();
        var childWindow = window.open(oldRef);
        childWindow.onload = function(){
          console.log('at this point you can interact with this newly opened window-object: ',childWindow);
        };
      };
});

//...
// some other code
//...

var p = document.getElementById("myElement"); 
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();

希望这会有所帮助。

【讨论】：

谢谢，但我不能使用打开窗口...:(我只能使用 a.tag...
请试一试:)

【解决方案4】：

您可以使用SharedWorker 在不同的浏览上下文之间进行通信。

见Can we refer to javascript variables across webpages in a browser session?

您也可以使用storage 事件Can the mechanism that loads the worker in Shared Web Workers be modified?

【讨论】：