使用 javascript 将 html 写入新窗口答案

【问题标题】：Writing html to a new window with javascript使用 javascript 将 html 写入新窗口
【发布时间】：2013-02-10 18:38:45
【问题描述】：

我一直在研究如何打开一个新窗口并使用 jQuery/JavaScript 将 HTML 写入其中，似乎正确的方法是：

为新窗口创建一个变量

var w = window.open();

插入新数据并处理变量

$(w.document.body).html(data);

对我来说，这完全有道理。但是，当我尝试将其合并到我的脚本中时（“数据”是 HTML 的持有者），它不会打开一个新窗口......除非我只是错过了一些简单的东西，据我所知它看起来很棒。 ..

function newmore(str) {
    var identifier = 4;
    //get the history
    $.post("ajaxQuery.php", {
        identifier : identifier,
        vanid : str
    },
    //ajax query 
    function(data) {
        //response is here
        var w = window.open();
        $(w.document.body).html(data);
    });//end ajax                
}

有什么想法吗？

附：控制台中似乎没有错误

【问题讨论】：

请不要使用弹出窗口。它们通常很烦人，即使是应要求打开 - 请考虑使用内联“窗口”。
它是用来展示一家公司的历史的，相信我我也不喜欢它，但是我又不付账了。 :)

标签： javascript jquery ajax new-window

【解决方案1】：

您的新窗口可能被大多数浏览器内置的弹出窗口阻止程序阻止。如果您创建新窗口作为用户操作（键、单击）的直接结果，那么浏览器通常不会阻止它。但是，如果您等到稍后的某个时间（例如在 ajax 调用完成之后），那么它将被阻止，这可能就是您的情况。

因此，修复通常是立即创建窗口以直接响应用户事件（不要等到 ajax 调用完成），将窗口句柄保存在变量中，然后稍后将内容放入窗口中您的 ajax 调用完成。

function newmore(str){
    var identifier = 4;
    // create window immediately so it won't be blocked by popup blocker
    var w = window.open();
    //get the history
    $.post("ajaxQuery.php", {
        identifier : identifier,
        vanid : str
    },
    //ajax query 
    function(data) {
        //response is here
        $(w.document.body).html(data);

    });//end ajax                

}

【讨论】：

坦率地说，这种工作方式很愚蠢，但这就是问题所在。您会认为我会立即抓住这一点：/ 生病添加这些更改，看起来就像修复了 ti。谢谢:)
@Nick - 是的，这很痛苦，但浏览器也很难弄清楚什么是和不是不需要的广告弹出窗口。错误在于最糟糕的广告服务试图通过这些弹出窗口破坏我们的浏览体验，并导致浏览器不得不以这种方式响应。
我知道它是从哪里来的，一个人毁了每个人 :) 我可能会通过更多故障排除来解决这个问题，但是您提供的代码打开了一个新选项卡，但从未写入数据。有什么想法吗？抱歉，我是一个 php 本机，我正在与 jquery 苦苦挣扎：p
我收回，正在写入数据。但它仍然在新选项卡而不是窗口中打开。虽然不是什么大不了的事
@Nick 您将无法控制新窗口是作为选项卡还是窗口打开 - 这不是 Javascript 的能力。由浏览器的设置决定

【解决方案2】：

试试吧：

var w = window.open();
w.document.write(data);

文档对象的“innerHTML”属性（这是 jQuery 的 .html() 使用的）表示 HTML 文档，这是新窗口所没有的。即使这样做了，将完整的文档放入 HTML 文档也没有任何意义。这是一个新创建的文档，因此您可以直接对其进行写入。

【讨论】：

没有区别，数据从我的 ajax 查询中返回，但没有找到新窗口，我知道一切正常，因为我有数据在某一点更改了 div 的内部 html，现在我只是想打开一个新窗口。

【解决方案3】：

这种和平的代码将起作用：

var data = "<h1>Test</h1>";
var w = window.open("", "mywindow1", "width=350,height=150");
$(w.document.body).html(data);

打开新窗口时必须告知一些参数。

但是，如果可能的话，我几乎不建议您使用其他方式，例如 jquery UI 或 Twitter Bootstrap，因此您不会使用弹出窗口。

【讨论】：