Question

我正在尝试查询从我的网站打开的另一个窗口（不同的域）中的元素。例如，我可能有这样的链接：

<a href="#" onclick=openOtherWindow();>Click me</a>

哪个代码运行如下：

function openOtherWindow() {
  var w = window.open("http://www.example.com/", "my_popup","height=500, width=800 left=20, top=40");
  console.log('Left:' + w.screenLeft);
  console.log('Num anchors: ' + w.document.anchors.length);
  console.log('Num images: ' + w.document.images.length);
  w.close();
}

窗口打开，控制台显示：

Left: 20
Num anchors: 0
Num images: 0

（是的，有链接和图片）。所以，我想也许窗口没有实际加载，所以尝试了类似的东西：

function openOtherWindow() {
  var w = window.open("http://www.example.com/", "my_popup","height=500, width=800 left=20, top=40");
  w.onload = function() {
    console.log('Left:' + w.screenLeft);
    console.log('Num anchors: ' + w.document.anchors.length);
    console.log('Num images: ' + w.document.images.length);
  }
  w.close();
}

现在我在控制台里什么也没得到。我尝试了其他方式来查看正在发生的事情（将console.log()替换为alert()），但不要去。

我认为我对如何知道其他窗口何时打开和加载有一个根本的误解。有人可以让我迷惑吗？

Answer 1

如果域不同，则无法访问新窗口的大多数（如果不是全部）属性。这称为同源策略，出于安全原因。

例如，假设您在网站上注册并通过邮件向您发送激活码。出于“礼貌”，他们提供了GMail，Hotmail，Yahoo Mail以及其他一些受欢迎的电子邮件提供商的链接。如果他们可以从新窗口访问内容，他们可以在您输入密码时轻松读取密码。

更多信息：

Answer 2

打开窗口时，会立即填充空白页面。它的属性是你可以访问的，只需尝试

var w = window.open("http://www.example.com/", "my_popup","height=500, width=800 left=20, top=40");
console.log(w.document.URL);
console.log(w.history.current);
console.log(w.document.documentElement.outerHTML);
w.close();

在Opera中我得到了

about:blank

http://www.example.com/

<html dir="ltr"><head>
 <meta name="viewport" content="width=device-width">
</head>
<body></body></html>

文档加载后，由于same origin policy，您将无法再访问其属性;相反，它会抛出安全错误并破坏你的脚本。

我可以使用javascript查询从我的网站打开的窗口中的元素吗？

2 个答案: