如何在新窗口中获取 dom 元素？答案

【问题标题】：How to get a dom element in a new window?如何在新窗口中获取 dom 元素？
【发布时间】：2013-04-08 13:32:40
【问题描述】：

JavaScript 中的一个简单任务是打开一个新窗口并在其中写入。但是我需要写一个 dom 元素，一个带有 ID 的 div。

var novoForm = window.open("somform.html", "wFormx", "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no,");

比我试试……

var w = novoForm.innerWidth;
var h = novoForm.innerHeight;
novoForm.document.getElementById("monitor").innerHTML = 'Janela: '+w+' x '+h;

我这样做是为了查看对象“novoForm”是否有效。但是“监视器”div中没有写任何内容。我也尝试使用 onload 事件但没有成功。我想知道这是一些安全限制还是我遗漏了什么......

【问题讨论】：

标签： javascript window

【解决方案1】：

您做得对，但您确实需要确保使用onload（或投票），因为页面需要一点时间才能加载到新窗口中。

这是一个完整的工作示例：Live Copy | Source

(function() {

  document.getElementById("theButton").onclick = function() {

    var novoForm = window.open("http://jsbin.com/ugucot/1", "wFormx", "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no,");
    novoForm.onload = function() {
      var w = novoForm.innerWidth;
      var h = novoForm.innerHeight;
      novoForm.document.getElementById("monitor").innerHTML = 'Janela: '+w+' x '+h;
    };
  };
})();

我想知道是安全限制还是我遗漏了什么......

在您的示例中没有显示，不，因为页面显然是从同一来源加载的。如果 URL 来自一个不同的来源，那么是的，你会遇到Same Origin Policy，它禁止跨域脚本。您可以通过document.domain 属性放宽它，让包含上述代码的窗口和正在加载的窗口将document.domain 设置为相同的值。来自the link above：

如果两个窗口（或框架）包含将域设置为相同值的脚本，则这两个窗口的同源策略会放宽，并且每个窗口都可以相互交互。例如，从 orders.example.com 和 catalog.example.com 加载的文档中的协作脚本可能会将它们的 document.domain 属性设置为“example.com”，从而使文档看起来具有相同的来源并使每个文档都可以读取对方的属性。

有关document.domain 的更多信息，请访问on MDN。请注意，它仅适用于两个文档共享一个公共父域的情况，例如，如果 app1.example.com 和 app2.example.com 都设置为 example.com，则它适用于它们，但不适用于 example1.com 和 example2.com，因为它们没有他们可以设置的共同值。

【讨论】：

我尝试使用 onload，但这个事件没有触发。不知道为什么，我会做更多的测试......
我不肯定，但我认为document.domain 的事情只有在两个窗口的父域名相同时才有效。例如，Google 父级和 Stackoverflow 弹出窗口无法使用它进行通信。虽然不确定
@Ian：对不起，是的，我应该把它标记出来。（是的，这是正确的。）完成。
我的意思是，我希望这很明显，但我想知道这一点很重要:)
仍然无法使 onload 着火。它在要执行的事件之前接缝打开的窗口。没有“new Window()”构造函数，所以我不知道如何创建一个窗口对象并做对。也许在真实的网络中它会起作用，但并不可靠。所以我做了一个测试函数和一个 setInterval 来发现什么时候可以使用“监视器”div。这不是一个很好的解决方案，但它确实有效。

【解决方案2】：

或者，这是一个解决方案：

var novoForm = window.open("somform.html", "wFormx", "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no,");
var teste = function(){
    var mon = novoForm.document.getElementById("monitor");
    if(typeof(mon)!="undefined"){
        //novoForm.alert("Achei!");
        var h = novoForm.innerHeight;
        var strh = String(h - 40 - 30)+'px';
        novoForm.document.getElementById("pagina").style.height = strh;
        novoForm.document.getElementById("monitor").innerHTML = '<p class="legenda">&copy; NetArts | gustavopi</p>';
        clearInterval(id);
    }
}
var id = setInterval(teste, 100);

这将完成这项工作。对我来说不是一个“漂亮”的解决方案，但它有效！

【讨论】：

【解决方案3】：

取决于您尝试加载到新窗口中的网址。 @T.J 是对的。另请注意，如果您只想加载空白文档，您可以将“about:blank”加载到 url。唯一的区别是您将使用 outerWidth，因为您尚未加载实际文档。

var novoForm = window.open("about:blank", "wFormx", "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no,");
var w = novoForm.outerWidth;
var h = novoForm.outerHeight;
novoForm.document.body.innerHTML = 'Janela: '+w+' x '+h;

【讨论】：