Question

我无法理解弹出式窗口的DOM树及其在开启窗口工作中的操作方式。实现我想要做的事情的正确方法是什么（如下所述）？

我有一个普通的浏览器窗口，其中JavaScript函数收集所选元素并从中创建POST数据字符串。然后我打开一个带有占位符内容的弹出窗口，将一个函数绑定到执行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);之后）原始空白页面尚未显示再次显示。

如果没有调试器，我注意到结果页面的渲染至少已经开始，但很快就会被原始占位符页面替换。

有趣的事情肯定会在这里发生。

Answer 1

我怀疑jQuery库没有在弹出窗口中加载。然后，当执行弹出窗口中就绪事件之后的代码时，$函数未知，从而导致错误。我可能错了，但我从来没有以跨窗口的方式使用ready()（始终在document上，而不是window)。

编辑：您还可以执行的操作（而不是在打开的窗口中包含jQuery）将$替换为打开的窗口中的每个window.opener.$。但那现在相当难看，不是吗？ ; - ）

Answer 2

我实际上是在寻找解决这个问题的方法。我猜测浏览器出于安全原因阻止访问修改子窗口的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中对此进行了测试。而且，即使设置标签也从未改变弹出窗口的标题。这不是一个完美的解决方案，但它适用于我的情况。

如何用AJAX请求替换弹出窗口的内容？

2 个答案: