如何将子窗口中的事件发送到其父窗口 [英] How can I send an event from child window to its parent window

问题描述

我的主要目标是：

转到我的应用程序，在新标签页面中打开链接，在新标签页中创建内容并发送活动到父母主要标签刷新。

我已经学会了2种不能完全满足我需要的技术：

I have learned 2 techniques that doesn't do exactly what I need:

1. postMessage - 据我所知只在iframe而不是在标签上工作


2. window.opener - 仅适用于窗口。 open（url）只打开新窗口而不是新标签。

如何使用子项将事件传递给父级标签？我很高兴在父母和孩子的javascript代码的具体示例。它应该适用于跨域（例如：www.mydomain.com和bills.mydomain.com）。

How can I pass an event from the child to the parent using tabs? I'd be happy for a specific example for javascript code in the parent and the child. It should work for cross-domain (for example: www.mydomain.com and bills.mydomain.com).

我缺少一个jQuery解决方案吗？

Is there a a jQuery solution I am missing?

推荐答案

以下适用于我的chrome，firefox，即（没有测试更多浏览器）

The following works for me in chrome, firefox, ie(didn't test more browsers)

假设3个文件

1. （ www.mydomain.com/parent.html ）包含带有链接的主要文档的页面


2. （ bills.mydomain.com/child.html ）将由链接


3. （ www.mydomain.com/dispatcher.html ）稍后解释

1. (www.mydomain.com/parent.html)the page that contains the 'main'-document with the link
2. (bills.mydomain.com/child.html)the page that will be opened by the link
3. (www.mydomain.com/dispatcher.html)explained later

首先将所有3个文档的域属性设置为mydomain.com

at first set the domain-property of all 3 documents to mydomain.com

<script>
document.domain="mydomain.com";
</script>

创建一个隐藏的iframe，其名称属性为例如hiddenframe。还要创建一些稍后可能收到回复的函数。

in parent.html create a hidden iframe with a name-property of e.g. "hiddenframe". Also create some function that may later receive a response.

parent.html现在应该如下所示：

parent.html should now look like this:

<script>
document.domain="mydomain.com";
function fx(msg)//receives the response
{
  alert(msg)
}
</script>
<iframe name="hiddenframe" style="display:none"></iframe>
<a href="http://bills.mydomain.com/child.html" target="_blank">click</a>

---

在child.html中，您现在可以使用将文档加载到parent.html内隐藏的iframe中

---

In child.html you'll now be able to load a document into the hidden iframe inside parent.html

<script>
document.domain="mydomain.com";
window.open('http://www.mydomain.com/dispatcher.html','hiddenframe');
</script>

（面对使用 window.open时不要混淆（）在这里，不会打开新窗口，页面将被加载到parent.html中的iframe中）

(don't be confused in face of the use of window.open() here, there will not open a new window, the page will be loaded into the iframe in parent.html)

在dispatcher.html中，您现在可以调用parent.html内的函数

In dispatcher.html you now may call the function inside parent.html

<script>
document.domain="mydomain.com";
parent.fx('you just got some response');
</script>

---

当你只需要重装时parent.html它有点容易。

再次在parent.html和child.html中设置document.domain-property（您不需要parent.html中的iframe和dispatcher.html）

Again set the document.domain-property in parent.html and child.html(you don't need the iframe in parent.html and the dispatcher.html)

在parent.html中还设置了窗口的name-property，例如

In parent.html also set the name-property of the window, e.g.

<script>
  window.name="parentTab";
</script>

在child.html中，您现在可以访问 parentTab -window（tab）

In child.html you now may access the parentTab-window(tab)

<script>
    document.domain="mydomain.com";
    window.open('http://www.mydomain.com/parent.html','parentTab');
</script>

...或者只是使用parentTarget作为子项中链接或表单的target-property。 html

...or simply use "parentTarget" as target-property of a link or form in child.html

这篇关于如何将子窗口中的事件发送到其父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！