logo标签列表

如何在Firefox中读写数据到新标签页？

javascript
3
过去这个曾经有效：
// writing
var newTab = window.open();
newTab.document.write("<html><head><title>I'm just a tab</title></head>");
newTab.document.write("<body id='hello'>With some text on it</body>");
newTab.document.write("</html>");
newTab.document.close();

// reading what was wrote
newTab.document.getElementById('hello').addEventListener("click", custom_search_function(), false);

然而，现在当我尝试执行这段代码时，Firefox会提示一个安全错误：
错误：SecurityError: The operation is insecure.
我在论坛上搜索了一种替代方法，这个方法可以解决问题：
var textOnPage = "<html><head><title>I'm just a tab</title></head><body>";
var newTab = window.open("data:text/html;charset=UTF-8," + encodeURIComponent(textOnPage));
newTab.document.close();

但是我无法通过getElementById访问该页面

newTab.document.getElementById('hello').addEventListener("click", custom_search_function(), false);

返回：

错误：类型错误：newTab.document.getElementById(...) 为 null

如何在新标签页中编写内容，并通过 getElementById 等函数返回并读取它？

可能是Javascript在浏览器标签页/窗口之间通信的重复问题。 - nneonneo
@nneonneo 这种方法现在已经相当老了。现在更推荐使用postMessage API。 - David-SkyMesh
2个回答
2
你遇到了单一来源策略的问题。当你打开一个没有URL的新窗口时，按定义它不能与原始（打开者）窗口具有相同的域名。
你可以改为在window.open()调用中打开站点上的另一个URL（大多是空白HTML），并作为其body.onload事件处理程序（或jQuery.ready()）的一部分设置message事件的事件处理程序，如下所示：
$(document).ready(function(){
   window.addEventListener("message", receiveMessage, false);
});

function receiveMessage(evt)
{
  if (evt.origin !== "https://your-domain.here")
    return;

  // do something with evt.data
  $(document.body).append(""+evt.data);
}

在您的原始窗口中调用：
otherWindow.postMessage(message, "https://your-domain.here");

"

postMessage API现在已经得到了许多现代浏览器的良好支持。

您仍然无法直接操作otherWindow窗口的内容，但您可以从otherWindow向原始窗口发送消息，以达到相同的效果（例如：将您的内容操作代码放在otherWindow的内容中，并从原始窗口“调用”它）。

"
2

曾经在很长一段时间内，这种技术（用于Web应用程序）在各种浏览器中都可以使用。当时的window.open页面大多被视为与父页面来自同一域（尽管行为总是有点奇怪，url栏中的URL通常是about:blank）。

现在的标准是使用about:blank作为URL源打开页面，虽然我可以理解为什么简化事情这样做是有道理的，也可以理解这个标准打破了先前的行为，但问题在于about:blank并不是一个真正的URL，因此标准的跨源规则应该有所不同，至少在window.open调用的情况下应该如此。

如果允许窗口写入它们打开的页面，是否存在真正的安全威胁呢？我认为不会，但这是可能的。最终，我已经不再是一名Web开发人员，对这些事情也不是很在意，但如果其他人的应用程序也遇到了类似问题，我也不会感到惊讶。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接