更改弹出内容 [英] Changing popup content
问题描述
我正在使用popup = window.open(....)打开一个弹出窗口，然后尝试在该弹出窗口的div中插入一些html.
I'm opening a popup using popup = window.open(....) and then trying to insert some html into a div in the popup.
popup.document.getElementById('div-content').innerHTML = "hello world";不执行任何操作，popup.document.getElementById('the-field').value = "Hello There";用id ="the-field"更改字段的内容.
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".
有人知道为什么一个起作用而另一个不起作用吗?如何替换div的内容?
Any idea why one is working but not the other? How can i replace the content of the div?
希望可以为您提供帮助.
hope you can help.
弹出窗口
<!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>
代码
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";
}
推荐答案
我认为这里的问题是，当您尝试访问其中一部分时，弹出窗口中的文档尚未完成加载.在我的机器上，使用提供的代码都无法访问div.
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.
如果您要插入的内容是固定的，则只需在弹出页面上进行所有这些更改，这样您就可以使它仅在文档完全加载后才发生.如果您需要发送一些动态内容，最简单的方法可能是使用查询字符串.
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.
更新: 只有当弹出窗口完成加载时，才有一种方法可以启动DOM操作功能.首先，您需要在主窗口上有一个回调函数，并将所有DOM操作代码放在此处:
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:
window.callback = function(doc) {
doc.getElementById('the-field').value = "Hello there";
doc.getElementById('div-content').innerHTML = "Hello world";
}
然后，只需将一个函数调用绑定到弹出窗口上的body onload事件:
Then, simply bind a function call to the body onload event on the popup window:
<script type="text/javascript">
function loaded() {
window.opener.callback(document);
}
</script>
<body onload="loaded();"><!-- body content --></body>
这篇关于更改弹出内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
