我不知道弹出窗口的 DOM 树以及它们在打开窗口中的操作是如何工作的。实现我想要做的事情的正确方法是什么(如下所述)？
我有一个普通的浏览器窗口，其中 JavaScript 函数收集选定的元素并从中创建 POST 数据字符串。 然后，我打开一个包含占位符内容的弹出窗口，将一个函数绑定(bind)到执行 AJAX 请求的 window.ready，然后尝试用 AJAX 结果替换弹出窗口中的 HTML。
在代码中，这是在打开窗口上运行的 JavaScript 中完成的:。
function showMessages(queryParams, width, height) {
var mailWindow = window.open('html/blankwithdoctype.html', 'foo', 'resizable=yes,scrollbars=yes,height='+height+',width='+width);
var params = queryParams.substring(1);
$(mailWindow.document).ready(function() {
doPostRequest(params, mailWindow);
});
return mailWindow;
}
function doPostRequest(queryParams, mailWindow) {
function callback(data, textStatus) {
var mv = mailWindow;
$(mv.document).find("html").html(data);
};
$.post('MailFile.do', queryParams, callback);
}
当使用 Chrome 开发者工具或 Firefox+FireBug 在 $(mv.document).find("html").html(data); 处中断时，我注意到暂时显示了结果，但是在 JQuery 调用堆栈展开后(在 $.post('MailFile.do', queryParams, callback); 之后)，原始空白页面再次显示。
如果没有调试器，我注意到结果页面的渲染至少已开始，但它很快就会被原始占位符页面替换。
这里肯定发生了一些有趣的事情。
最佳答案
我实际上正在寻找解决这个问题的方法。我猜测出于安全原因浏览器会阻止访问修改子窗口的 DOM。 (我希望它能给出某种错误，但我从来没有遇到过)
无论如何，我不需要打开现有的页面，我的应用程序确实需要一个单独的弹出窗口来容纳多个屏幕。
使用 window.open(null, null, "...options...") 打开弹出窗口后，我简单地调用 document.write("...FULL HTML FOR POPUP...") 并基本上从头开始构建整个弹出窗口。从那时起，我就可以从父窗口访问我想要执行的任何 DOM 操作。
以下是我所讨论内容的示例:
// using null for the URL (defaults to about:blank in some browsers)
// using null for the Window Name (allowed me to have multiple popups)
var popup = window.open(null, null, "width=600,height=600");
// overwrite the entire document with our own HTML
popup.document.write('<!DOCTYPE html><html><head></head><body></body></html>');
// Using jQuery for DOM manipulation here
var $popup = $("body", popup.document);
不幸的是，我只在 Chrome 和 Firefox 中真正测试过这一点。此外，即使设置标签也不会改变弹出窗口的标题。这不是一个完美的解决方案，但它适用于我的情况。
关于javascript - 如何用 AJAX 请求替换弹出窗口的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1769180/