javascript 如何在新窗口中获取dom元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15880468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a dom element in a new window?
提问by Gustavo
A simple task in JavaScript is to open a new window and writing inside. But I need to write in a dom element, a div with an ID.
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,");
Than I try something...
比我尝试的东西...
var w = novoForm.innerWidth;
var h = novoForm.innerHeight;
novoForm.document.getElementById("monitor").innerHTML = 'Janela: '+w+' x '+h;
I did it to see if the object "novoForm" is valid. But nothing is written in "monitor" div. I also try using onload event with no success. I'm wondering if it's some security restriction or am I missing something...
我这样做是为了查看对象“novoForm”是否有效。但是“监视器”div 中没有写任何内容。我也尝试使用 onload 事件但没有成功。我想知道这是一些安全限制还是我遗漏了什么......
采纳答案by Gustavo
Alternatively, this is a solution:
或者，这是一个解决方案：
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">© NetArts | gustavopi</p>';
clearInterval(id);
}
}
var id = setInterval(teste, 100);
This will do the job. Not a "pretty" solution to me, but it works!
这将完成工作。对我来说不是一个“漂亮”的解决方案，但它有效！
回答by T.J. Crowder
You've done it right, but you doneed to be sure to use onload(or poll), because it takes a moment for the page to get loaded in the new window.
您做得对，但您确实需要确保使用onload（或轮询），因为页面需要一些时间才能加载到新窗口中。
Here's a full working example: 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;
};
};
})();
I'm wondering if it's some security restriction or am I missing something...
我想知道这是一些安全限制还是我遗漏了什么......
Not in your example as shown, no, because the page is clearly being loaded from the same origin. If the URL were from a differentorigin, then yes, you'd be running into the Same Origin Policy, which prohibits cross-origin scripting. You can relax that via the document.domainproperty, having both the window containing the code above and the window being loaded setting document.domainto the same value. From the link above:
不是在您的示例中，不，因为该页面显然是从同一来源加载的。如果 URL 来自不同的来源，那么是的，您会遇到Same Origin Policy，它禁止跨源脚本。您可以通过document.domain属性放宽它，将包含上述代码的窗口和正在加载的窗口设置document.domain为相同的值。从上面的链接：
If two windows (or frames) contain scripts that set domain to the same value, the same-origin policy is relaxed for these two windows, and each window can interact with the other. For example, cooperating scripts in documents loaded from orders.example.com and catalog.example.com might set their document.domain properties to “example.com”, thereby making the documents appear to have the same origin and enabling each document to read properties of the other.
如果两个窗口（或框架）包含将 domain 设置为相同值的脚本，则对这两个窗口放宽同源策略，并且每个窗口可以相互交互。例如，从orders.example.com 和catalog.example.com 加载的文档中的协作脚本可能会将其document.domain 属性设置为“example.com”，从而使文档看起来具有相同的来源并使每个文档都可以阅读对方的属性。
More about document.domaincan be found on MDN. Note that it only works where both documents share a common parent domain, e.g., so it works for app1.example.comand app2.example.comif they both set to example.com, but not for example1.comand example2.combecause they have not common value they can set.
更多信息document.domain可以在 MDN上找到。请注意，它仅适用于两个文档共享一个公共父域的情况，例如，因此它适用于app1.example.com并且app2.example.com如果它们都设置为example.com，但不适用于example1.com并且example2.com因为它们没有可以设置的公共值。
回答by nobilist
Depends on what url you try to load into the new window. @T.J is right on that. Also note that if you just want to load a blank document you can load "about:blank" into the url. The only difference is that you would use outerWidth since you haven't loaded an actual document.
取决于您尝试加载到新窗口中的网址。@TJ 是对的。另请注意，如果您只想加载一个空白文档，您可以将“about:blank”加载到 url 中。唯一的区别是您将使用 externalWidth，因为您尚未加载实际文档。
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;
