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

Question

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事件但没有成功.我想知道这是否有一些安全限制,或者我错过了什么......

Answer 1

你做得对,但你确实需要确保使用onload(或轮询),因为在新窗口中加载页面需要一些时间.

这是一个完整的工作示例:Live Copy | 资源

(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来自不同的来源,那么是的,您将遇到同源策略,该策略禁止跨源脚本.您可以通过该document.domain属性放松,同时包含上面代码的窗口和正在加载的窗口设置document.domain为相同的值.从上面的链接:

如果两个窗口(或框架)包含将域设置为相同值的脚本,则为这两个窗口放宽同源策略,并且每个窗口可以与另一个窗口交互.例如,从orders.example.com和catalog.example.com加载的文档中的协作脚本可能会将其document.domain属性设置为"example.com",从而使文档看起来具有相同的来源并使每个文档都能够读取另一个的属性.

详细了解document.domain可以发现关于MDN.请注意,它只能在那里两个文件共享一个共同的父域,例如,所以它适用于app1.example.com和app2.example.com,如果他们都设置为example.com,但不example1.com和example2.com,因为他们没有,他们可以制定共同的价值.

Answer 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);

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