在没有 window ref 的选项卡 dom 之间进行通信

Question

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

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 内容。

假设这是我的页面（仅供示例...）我应该如何访问它？

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Now Let's go to the tricky/advanced :) part...

当你使用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

我的问题是：

How can I access to this new tab dom if I want to change something

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

Answer 2

我遇到了类似的问题并构建了一个小库以通过带参数的 localStorage 进行函数调用。你可以找到它here。 Service Worker 当前不受所有 browsers.

支持

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

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

在你的另一个window:

<!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，它被触发到所有其他选项卡和 windows，但不是同一个选项卡。 ~~我将重写库以对事件使用更简洁的方法，但目前这应该可以解决问题。~~

更新

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

更新

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

Answer 3

您必须在触发点击事件之前附加一个 DOMNodeInserted 侦听器，然后您才能访问此 window 对象。

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

希望对您有所帮助。

Answer 4

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

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

您也可以使用 storage 事件

在没有 window ref 的选项卡 dom 之间进行通信

Communicate between tabs dom without window ref

html

javascript

google-chrome

service-worker