13

我的主要目标是：

转到我的应用程序，在新选项卡中打开一个链接，在新选项卡中创建一些内容并将事件发送到父主选项卡以刷新。

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

  1. postMessage - 据我所知，仅适用于 iframe 而不是标签
  2. window.opener - 仅适用于仅打开新窗口而非新标签的 window.open(url)。

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

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

4

3 回答 3

6

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

假设 3 个文件

  1. ( www.mydomain.com/parent.html ) 包含带有链接的“主”文档的页面
  2. ( bills.mydomain.com/child.html ) 链接将打开的页面
  3. ( www.mydomain.com/dispatcher.html ) 稍后解释

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

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

在 parent.html 中创建一个隐藏的 iframe，其名称属性为“hiddenframe”。还要创建一些稍后可能会收到响应的函数。

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

<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 中

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

（不要对window.open()这里的使用感到困惑，这里不会打开新窗口，页面会加载到parent.html中的iframe中）

在 dispatcher.html 中你现在可以调用 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 和 dispatcher.html 中的 iframe）

在 parent.html 中还设置窗口的名称属性，例如

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

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

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

...或者简单地使用“parentTarget”作为 child.html 中链接或表单的目标属性

于 2012-11-11T19:48:11.670 回答
0

我为自己做了什么，我实现了一些 ajax 将更改从 window2 提交到数据库。我实现了 JSON 以将新数据从数据库中拉回 window1

于 2012-11-11T19:11:10.370 回答
0

通过查看类似的问题如何只谈论window.open（您不想使用）并且作为afaik，没有简单的方法可以让所有窗口都在同一个域上，对于您想要的，您可能需要编写自己的框架来做这个使用window.sessionStorage.
不过，我认为您不会使用它访问子域，当然也不会访问其他域。

sessionStorage使用..传递特定于窗口的消息的实用想法。
您可以在 URL (GET) 中传递东西，因此传递消息的一种方法可能是让父级为自己生成一个唯一的 id，为其子parentID级生成一个唯一的 id childID（插入parentID如果您使用的是，则与点击一起进入 URL <a>，或者如果您不介意 a ，则使用隐藏字段<form method="GET">），然后sessionStorage使用键将消息保存到父parentID.childID.timeStamp级以窗口 ID 开头的sessionStorage 键.，然后是匹配的, （即父级查找parentID.），将键和值复制到新的 var，删除（因此不会再次找到），然后根据需要进行解析。

我知道这有点罗嗦，但我认为作为一个概念来解释可能比编写工作示例代码要容易得多。

于 2012-11-12T04:37:11.823 回答