Question

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

理想情况下，我想写

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

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

Answer 1

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

答案很长，你可以发送弹出窗口的href片段（即＃in protocol：// server / path？query＃fragment中的部分）。如果弹出窗口中的内容知道检查其片段是否有变化，那么您可以将数据传递给它。

如果它来自同一个域，则只要存在具有该ID的元素，您的代码就可以正常工作。

Answer 2

但是，getElementById函数返回NULL。

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

对于完全动态的弹出窗口，open他们带有空白网址，并popupwindow.document.write他们的内容。对于从单独文档加载的协作脚本弹出窗口，让子文档在准备好访问时调用其父文档。或者只使用页面弹出式div，这些div通常不那么烦恼，无论是作为编码员还是最终用户。

Answer 3

当用户点击您的链接打开弹出窗口时，会向其传递一个查询字符串，然后使用您的服务器端代码对该值做出反应。

Answer 4

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

它不是很整洁，但我可以将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()实现中时。但是，就我而言，我认为这种方法可行。

我很欣赏有关此策略的反馈。谢谢！

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

4 个答案: