javascript 更改弹出内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7396478/
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
Changing popup content
提问by djeetee
I'm opening a popup using popup = window.open(....)and then trying to insert some html into a div in the popup.
我正在打开一个弹出窗口popup = window.open(....)，然后尝试将一些 html 插入到弹出窗口的 div 中。
popup.document.getElementById('div-content').innerHTML = "hello world";doesn't do anything however, popup.document.getElementById('the-field').value = "Hello There";changes the content of a field with an id="the-field".
popup.document.getElementById('div-content').innerHTML = "hello world";然而，什么都不做，popup.document.getElementById('the-field').value = "Hello There";改变了一个 id="the-field" 的字段的内容。
Any idea why one is working but not the other? How can i replace the content of the div?
知道为什么一个有效而另一个无效吗？如何替换div的内容？
hope you can help.
希望你能帮忙。
EDIT: the popup
编辑： 弹出窗口
<!DOCTYPE html>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<div id="div-content"></div>
<div id="report-container">
<input type="text" id="the-field" name="the_field"/>
</div>
<footer>
</footer>
</body>
</html>
the code
代码
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes ,resizable=yes");
popup.document.getElementById('the-field').value = "Hello There"; // this works
popup.document.getElementById('div-content').innerHTML = "hello world";
}
采纳答案by nfang
I think the problem here is that the document in the popup windows hasn't finished loading when you try to access a part of it. On my machine, neither of the divs can be accessed with the provided code.
我认为这里的问题是当您尝试访问其中的一部分时，弹出窗口中的文档尚未完成加载。在我的机器上，使用提供的代码无法访问两个 div。
If the content you want to insert is fixed, then just do all these changes on the popup page itself so that you can make it happen only when the document is completely loaded. If you need to send some dynamic contents, the easiest approach may be using query strings.
如果您要插入的内容是固定的，那么只需在弹出页面本身上进行所有这些更改，这样您就可以仅在文档完全加载时进行更改。如果您需要发送一些动态内容，最简单的方法可能是使用查询字符串。
UPDATE: There is a way to fire up DOM manipulation function only when the popup finishes loading. First, you need a callback function on the main window, and put all the DOM manipulation code there:
更新：有一种方法可以在弹出窗口完成加载时启动 DOM 操作功能。首先，您需要在主窗口上有一个回调函数，并将所有 DOM 操作代码放在那里：
window.callback = function(doc) {
doc.getElementById('the-field').value = "Hello there";
doc.getElementById('div-content').innerHTML = "Hello world";
}
Then, simply bind a function call to the body onload event on the popup window:
然后，只需将函数调用绑定到弹出窗口上的主体 onload 事件：
<script type="text/javascript">
function loaded() {
window.opener.callback(document);
}
</script>
<body onload="loaded();"><!-- body content --></body>
回答by rubens
...or simply:
...或者简单地说：
<script type="text/javascript">
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes,resizable=yes");
popup.window.onload = function() {
popup.document.getElementById('the-field').value = "Hello There";
popup.document.getElementById('div-content').innerHTML = "hello world";
}
}
</script>
