如何访问子窗口的DOM树？

Question

我使用以下代码打开一个新窗口：

purchaseWin = window.open("Purchase.aspx","purchaseWin2", "location=0,status=0,scrollbars=0,width=700,height=400");

我想访问 purchaseWin 的 DOM 树，例如：

I want to access the dom tree of the purchaseWin, e.g.

purchaseWin.document.getElementById("tdProduct").innerHTML = "2";

它不起作用。我只能这样做：

purchaseWin.document.write("abc");

我也尝试了这个方法，但它也不起作用：

 $(purchaseWin.document).ready(function(){

     purchaseWin.$("#tdProduct").html("2");

   });

我该怎么做？

- Billy

Answer 1

使用jQuery，您需要访问子窗口文档的内容：

$(purchaseWin.document).ready(function () {
  $(purchaseWin.document).contents().find('#tdProduct').html('2');
});

没有使用库，只用纯JavaScript的话，可以这样实现：

purchaseWin.onload = function () {
  purchaseWin.document.getElementById('tdProduct').innerHTML = '2';
};

我认为问题在于您试图在子窗口实际加载之前检索DOM元素。

- Christian C. Salvadó

---

纯JavaScript版本可以工作。 但是jQuery版本失败了。我需要在父窗口手动运行jQuery代码才能使其工作。 - Billy

适用于IE（不适用于Firefox）: $(purchaseWin.document).ready(function () {$(purchaseWin.document).contents().find('#tdProduct').html('2');});适用于Firefox（不适用于IE）: purchaseWin.onload = function () {$(purchaseWin.document).contents().find('#tdProduct').html('2');}; - Billy

看看Gunni的回复，使用$(purchaseWin).load作为jQuery选项是有效的，而文档准备事件则不行。 - Luke

Answer 2

也许 jQuery 的 load 事件对您有用，就像在类似的问题上对我有用一样，而准备好的事件没有起作用：

$(purchaseWin).load(function(){
    purchaseWin.$("#tdProduct").html("2");
});

- Gunni

---

新的是我使用了 .load 事件，而被接受的答案使用了 .ready 事件。对我来说这很重要。 - Gunni

这是唯一一个让我访问子节点的DOM的答案。 - pizza247

Answer 3

如果您加载不属于父窗口域的页面，则无法访问子窗口的文档。这是由JavaScript内置的跨域安全性所造成的。

- Deven Kalra

Answer 4

(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;
    };
  };
})();

- Guru