将内容添加到新打开的窗口答案

【问题标题】：Add content to a new open window将内容添加到新打开的窗口
【发布时间】：2012-05-06 18:11:04
【问题描述】：

我不知道如何解决这个问题，我尝试阅读很多帖子但没有一个答案。

我需要打开一个包含已编码页面的新窗口（在同一域内）并添加一些内容。

问题是，如果我使用OpenWindow.write()，页面还没有加载，或者它覆盖了所有内容，只有通过 write 添加的代码出现。

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
OpenWindow.document.write(output);

output 是我需要附加的代码。

我需要它至少在 Firefox、IE 和 GC 上工作。

提前致谢。如果我需要使用 JQuery 也没问题。

【问题讨论】：

我也试过了：OpenWindow.addEventListener("onload", function () { OpenWindow.content.body.innerHTML = "
hello world
"; }, true) ;
在子窗口中调用函数时，不能在函数参数中传递任何内容。您必须调用 childWin.function_name()。如果调用 childWin.function_name(output)，它将不起作用。有关从父级向子级传递数据，请参阅stackoverflow.com/questions/2678133/…

标签： javascript jquery html

【解决方案1】：

当您想要打开新标签/窗口时（取决于您的浏览器配置默认值）：

output = 'Hello, World!';
window.open().document.write(output);

当输出是 Object 并且您想要获取 JSON，例如（也可以生成任何类型的文档，甚至是使用 Base64 编码的图像）

output = ({a:1,b:'2'});
window.open('data:application/json;' + (window.btoa?'base64,'+btoa(JSON.stringify(output)):JSON.stringify(output)));

更新

谷歌浏览器 (60.0.3112.90) 阻止此代码：

Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9

当您想将一些数据附加到现有页面时

output = '<h1>Hello, World!</h1>';
window.open('output.html').document.body.innerHTML += output;

output = 'Hello, World!';
window.open('about:blank').document.body.innerText += output;

【讨论】：

我的弹出窗口被 chrome 阻止了，然后 document 不起作用，因为 window.open 未定义。因此，请确保您的弹出窗口是用户操作的直接结果。更多信息请阅读：stackoverflow.com/questions/4602964/…

【解决方案2】：

在parent.html:

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("child.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
        OpenWindow.init();
    });
</script>

在child.html:

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>

【讨论】：

如何将 jquery 变量/元素从父页面传递给子页面？ @ray-chengspan>
这有多安全？您没有通过 URL 传递数据，但会在某处被拦截吗？
它在 OpenWindow 上提供了未定义的函数 init()。谷歌浏览器

【解决方案3】：

你可以试试这个

在 mypage.html 中编写一个函数说 init() 来做 html 的事情（追加或其他）
当 dom 准备好时，而不是 OpenWindow.document.write(output); 调用 OpenWindow.init()

所以父窗口会有

    OpenWindow.onload = function(){
       OpenWindow.init('test');
    }

在孩子身上

    function init(txt){
        $('#test').text(txt);
    }

【讨论】：

我收到“OpenWindow.init 不是函数”错误，我已经定义了函数：
OpenWindow.init();永远不会执行 :( 还是谢谢

【解决方案4】：

当您在页面加载后调用document.write 时，它将消除所有内容并将其替换为您提供的参数。而是使用 DOM 方法添加内容，例如：

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
var text = document.createTextNode('hi');
OpenWindow.document.body.appendChild(text);

如果你想使用 jQuery，你会得到一些更好的 API 来处理。例如：

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).append('<p>hi</p>');

如果您需要在新窗口的 DOM 准备好后运行代码，请尝试：

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).ready(function() {
    $(OpenWindow.document.body).append('<p>hi</p>');
});

【讨论】：

它不起作用，如果我在调试时这样做，新窗口有时间加载并添加“hi”，一切正常，但在正常情况下，“hi”出现首先，然后页面加载覆盖一切：S 感谢您的帮助
我编辑了答案以将代码包装在 $(document).ready 块中。试试看。
这对我不起作用，起作用的是- $(printWindow).on('load', function () { $(printWindow.document.body).find('#page -content').html(printContent); });

【解决方案5】：

如果您想通过发送数据 POST 或 GET 方法打开页面或窗口，您可以使用如下代码：

$.ajax({
    type: "get",  // or post method, your choice
    url: yourFileForInclude.php, // any url in same origin
    data: data,  // data if you need send some data to page
    success: function(msg){
                console.log(msg); // for checking
                window.open('about:blank').document.body.innerHTML = msg;  
               }
});

【讨论】：

【解决方案6】：

更简单！

只需将下面的代码放在代码的<head> </head> 之间，您的所有链接都会在新窗口中打开：

<base target="_blank">

【讨论】：