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 回答