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

时间:2013-04-08 13:32:40

标签: javascript window

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

3 个答案:

答案 0 :(得分:8)

你做得对,但需要确保使用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.comexample.com,但不适用于example1.comexample2.com,因为他们没有共同的价值。

答案 1 :(得分:0)

或者,这是一个解决方案:

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

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

答案 2 :(得分:-1)

取决于您尝试加载到新窗口的URL。 @ T.J是对的。另请注意,如果您只想加载空白文档,可以在网址中加载“about:blank”。唯一的区别是您将使用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;