Javascript 父窗口如何将数据发送到弹出窗口？答案

【问题标题】：How can a Javascript parent window send data to popup window?Javascript 父窗口如何将数据发送到弹出窗口？
【发布时间】：2011-03-03 22:39:13
【问题描述】：

我一直在使用 HTML 和 Javascript 编写基于浏览器的应用程序（或者更确切地说，快速原型化应用程序）。我希望主窗口能够显示带有动态数据的弹出窗口。但是，我无法弄清楚如何将数据从父窗口推送到 Javascript 中的弹出窗口。请注意，我假设应用程序可以在“离线”场景中使用，因此所有动态数据都应该来自主窗口。

理想情况下，我想写

var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";

但是，getElementById 函数返回 NULL。如何将数据从父窗口推送到弹出窗口？

【问题讨论】：

我知道这可能是一个愚蠢的问题，但您确定子窗口有一个具有该 ID 的节点吗？请记住，大小写很重要！
var popup 是否在调用它的其他函数的范围内？你的语法是正确的。
@Steven Paligo，是的，popup.html（在这个例子中）有一个明确定义的“数据”元素。

标签： javascript popup

【解决方案1】：

弹出窗口是否提供来自与父域不同的域的内容？如果是这样，简短的回答是你不能。

长答案是您可以发送弹出窗口的 href 片段（即协议中的 # 之后的部分：//server/path?query#fragment）。如果弹出窗口中的内容知道检查其片段是否有更改，那么您可以将数据传递给它。

如果它来自同一个域，那么您的代码应该可以工作，只要存在具有该 id 的元素。

【讨论】：

感谢您的回复，我想我可能可以使用这个想法。

【解决方案2】：

但是，getElementById 函数返回 NULL。

因为popup.html 尚未加载。如果您想与文档中的内容进行交互，您必须稍后在完成加载后回调。

对于完全动态的弹出窗口，open 使用空白 URL，popupwindow.document.write 将其内容放入其中。对于从单独文档加载的协同脚本弹出窗口，让子文档在准备好访问时调用其父文档。或者只使用页面内弹出式 div，这对于作为编码人员和最终用户的您来说通常不那么烦人。

【讨论】：

谢谢！您能否建议一个稍后回调的好方法，以确保页面已完成加载？我尝试了 jQuery 的 $(popup.document).ready(...)，但它似乎对我不起作用。
另外，对于 document.writing... 这是我最初的方法，但是我发现自己编写的 JS 是编写 JS 的。它不是很漂亮，而且感觉不对。
@Willi：$(something in another document) 的问题在于 jQuery 并不真正支持跨文档脚本：有些东西可以工作，有些东西被编码为依赖于特定的 document 对象，jQuery 是关联（如ready，但还有更多）不要。您通常必须在每个文档中有一个单独的 jQuery 副本。 document.write() 是一个讨厌的 hack，但对于简单的文档来说是合理的。否则，请包含一个钩子，让孩子准备好回调其父母。

【解决方案3】：

首先让我介绍一个我刚刚尝试过的可能解决方案。我想鼓励反馈和更好的解决方案，但是......

它不是很整洁，但我可以将 GET 样式的查询参数附加到弹出窗口的源 URL：

var popup = window.open("popup.html?" + identifier, somename, "");

现在在我的特殊情况下，弹出窗口是由唯一 ID 标识的某个模型的视图，因此弹出窗口可以向父窗口请求与该 ID 相关的数据：

var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);

此策略并非在所有情况下都有效，尤其是当数据不容易编组到 getModel() 实现时。但是，就我而言，我认为这种方法可能有效。

非常感谢您对此策略的反馈。谢谢！

【讨论】：

【解决方案4】：

当用户单击您的链接以打开弹出窗口时，将查询字符串传递给它，然后使用您的服务器端代码对该值作出反应。

【讨论】：

感谢您的回复，但是我可能有多个弹出窗口，每个窗口都有不同的信息。例如，NBA 中的每个球员都有不同的弹出窗口内容，尽管 popup.html 模板源是相同的。如何将标识符传递给弹出窗口？
@Willi Ballenthin，我知道你可能有不同的数据，我会更新我的答案，让它更明显一点。
不幸的是，让服务器做出反应并不能回答以下问题：“注意，我正在假设应用程序可以在“离线”场景中使用，因此所有动态数据都应该来自主窗口。”
@Willi Ballenthin，之前发布的代码可以调用父窗口中的函数，并且只能在父窗口中运行。我不相信您可以将数据传递给子窗口。您说该应用程序可能会离线使用，为什么不将所有可能的详细信息存储在子窗口中。当用户在父窗口中单击时，它会传递一个查询字符串，然后获取查询字符串并显示正确的详细信息。
或者您可以使用自己的带有 div 的弹出窗口？