在没有窗口引用的选项卡之间进行通信 [英] Communicate between tabs dom without window ref
问题描述
我使用以下命令打开带有一些页面内容的新标签（在新程序中），
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>标题< / H1>
< p> 。段落< / p为H.
< button type =button>点击我！< / button>
< / body>
< / html>
现在我们来看看 tricky / advanced：）部分...
当您使用 window.open （ 我无法使用）这很简单，因为您可以使用各种技术。
1.使用窗口对象
2.发布消息
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
3. cookies
4。 localStorage
但是在这里，我打开这个新页面时没有使用window.open获得的引用
我的问题是：
如果我想要如何访问这个新选项卡dom改变一些东西
我面临类似的问题，并建立一个小的库来进行函数调用通过localStorage与参数可能。您可以在此处找到它。
服务人员目前不受所有浏览器的支持。
下面是一个如何使用它的例子：
// //注册一个函数：
RegisterLocalStorageFunction（test，function（param）{
return param + param;
}）;
//调用函数：
let str =testing;
CallLocalStorageFunction（test，str，function（para）{
console.log（para）;
}）;
在您的上下文中：
RegisterLocalStorageFunction（CallAlert，function（param）{
alert（param）;
returnSuccess;
}）;
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>标题< / H1>
< p> 。段落< / p为H.
< button type =buttononclick =btnClick（）> Click Me！< / button>
< script>
函数btnclick（）{
CallLocalStorageFunction（CallAlert，Hello from the other tab，function（para）{
console.log（para）;
} ）;
}
< / script>
< / body>
< / html>
双方必须在同一个域中，否则他们不能访问相同的localStorage。 在github上使用我的currrent代码，我使用setInterval循环访问存储。 存储事件，它会触发所有其他选项卡和窗口，但不会触发相同的选项卡。 我会重写这个lib，以便在事件中使用更清晰的方法，但现在这应该做到这一点。
$ b
更新
在存储库中，您可以找到communicator2，这是基于'存储'事件。
更新
I use the following to open new tab (in new process) with some page content,
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
This is working and the new tab is open with myPage.html content.
Assume that this is myPage(just for sample...) how should I access it?
<!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...
when you use window.open (which I cannot use )this is quite simple since you can use various techniques .
1. using window object
2. post message
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
3. cookies
4. localStorage
But here I open this new page without the reference which is got with window.open
My question is:
How can I access to this new tab dom if I want to change something
I faced a similar issue and build a small lib to make function calls via localStorage with paramter possible. You can find it here. Service worker are currently not supported by all browsers.
Here is an example how to use it:
//Register a function:
RegisterLocalStorageFunction("test", function(param){
return param+param;
});
//Call a function:
let str = "testing";
CallLocalStorageFunction("test",str,function(para){
console.log(para);
});
In your context:
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();
In your other 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>
Both sides must be on the same domain, otherwise they cant access the same localStorage. With my currrent code on github I use setInterval to cycle through the storage. There is a storage event, which is fired to all other tabs and windows, but not to the same tab. I'll rewrite the lib to use the much cleaner approach with the event, but for now this should do the trick.
Update
In the repository you can find communicator2, which is based on the 'storage' event.
Update
Here is a working example hosted. Keep in mind to allow popups.
这篇关于在没有窗口引用的选项卡之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
