能否在新窗口使用jQuery？如何实现AJAX结果在新标签页展示

嘿，我懂你想把AJAX返回的内容放到新标签页展示的需求！之前你尝试的方法没生效，主要是因为新窗口和当前页面的上下文是独立的，而且操作时机和方式不对。下面给你两种可行的方案，推荐第一种更靠谱的：

方案一：用隐藏表单POST到新窗口（推荐） #

这种方式不需要AJAX，直接通过表单提交参数到show.php，并指定在新窗口打开。show.php只需要正常返回包含#main的完整HTML页面即可（和你之前AJAX返回的data内容一致，只是包裹在完整的页面结构里）。

代码示例：

$('.clickable').on('click', function() {
    const id = $(this).attr('data-packages');
    // 创建隐藏表单
    const form = $('<form>', {
        method: 'POST',
        action: 'show.php',
        target: '_blank' // 关键：在新标签页打开
    });
    // 添加请求参数
    form.append($('<input>', {
        type: 'hidden',
        name: 'type',
        value: 'showSFM'
    }));
    form.append($('<input>', {
        type: 'hidden',
        name: 'data',
        value: id
    }));
    form.append($('<input>', {
        type: 'hidden',
        name: 'user',
        value: username
    }));
    // 提交表单后移除
    form.appendTo('body').submit().remove();
});

为什么推荐这个方案？ #

• 新标签页的URL是show.php，用户刷新页面会重新加载内容，符合预期；
• 不需要处理跨窗口的DOM操作问题，后端只需要像处理普通请求一样返回完整页面即可；
• 兼容性更好，不会遇到浏览器对窗口操作的限制。

方案二：AJAX请求后写入新窗口（不推荐） #

如果一定要用AJAX先获取数据，再写入新窗口，需要注意等待新窗口加载完成，并且写入完整的HTML结构（包括依赖的资源，比如jQuery）：

代码示例：

$('.clickable').on('click', function() {
    let id = $(this).attr('data-packages');
    id = "'" + id + "'";
    $.ajax({
        url: "show.php",
        data: { type: "showSFM", data: id, user: username },
        type: "POST",
        success: function(data) {
            // 打开空白窗口
            const newWindow = window.open('about:blank');
            // 等待窗口加载完成后写入内容
            newWindow.onload = function() {
                // 写入完整的HTML结构，包含需要的资源
                newWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    </head>
                    <body>
                        <div id="main">${data}</div>
                    </body>
                    </html>
                `);
                newWindow.document.close(); // 必须关闭文档流，确保内容渲染
            };
        }
    });
});

这个方案的问题： #

• 新窗口的URL是about:blank，用户刷新会丢失内容；
• 部分浏览器可能会拦截这种自动打开的窗口（尤其是如果AJAX请求有延迟的话）；
• 需要手动管理页面的依赖资源，维护起来更麻烦。

内容的提问来源于stack exchange，提问作者rdlgi