Javascript 将内容添加到新打开的窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10472927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add content to a new open window
提问by Mario Corchero
I don't know how to solve this issue, I've trying reading many post but no one answer to it.
我不知道如何解决这个问题，我试过阅读很多帖子，但没有一个答案。
I need to open a new window with a page already coded (inside the same domain) and add some content.
我需要打开一个带有已编码页面的新窗口（在同一域内）并添加一些内容。
The problem is that if I use OpenWindow.write()the page is not loaded yet or it overrides everything and only the code added through write appears.
问题是，如果我使用OpenWindow.write()的页面尚未加载，或者它会覆盖所有内容，并且只会出现通过写入添加的代码。
var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
OpenWindow.document.write(output);
outputis the code I need to append.
output是我需要附加的代码。
I need it to work at least on Firefox, IE and GC.
我需要它至少在 Firefox、IE 和 GC 上工作。
Thanks in advance. It is not a problem if I need to use JQuery.
提前致谢。如果我需要使用 JQuery，这不是问题。
采纳答案by Ray Cheng
in parent.html:
在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>
in child.html:
在child.html：
<script type="text/javascript">
var dataFromParent;
function init() {
document.write(dataFromParent);
}
</script>
回答by iegik
When You want to open new tab/window (depends on Your browser configuration defaults):
当您想打开新选项卡/窗口时（取决于您的浏览器配置默认值）：
output = 'Hello, World!';
window.open().document.write(output);
When output is an Objectand You want get JSON, for example (also can generate any type of document, even image encoded in Base64)
例如，当输出是一个Object并且您想要获取 JSON 时（也可以生成任何类型的文档，甚至是 Base64 编码的图像）
output = ({a:1,b:'2'});
window.open('data:application/json;' + (window.btoa?'base64,'+btoa(JSON.stringify(output)):JSON.stringify(output)));
Update
Google Chrome (60.0.3112.90) block this code:
Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9
更新
谷歌浏览器 (60.0.3112.90) 阻止此代码：
Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9
When You want to append some data to existing page
当您想将一些数据附加到现有页面时
output = '<h1>Hello, World!</h1>';
window.open('output.html').document.body.innerHTML += output;
output = 'Hello, World!';
window.open('about:blank').document.body.innerText += output;
回答by Sethunath
Here is what you can try
这是您可以尝试的方法
- Write a function say init() inside mypage.html that do the html thing ( append or what ever)
- instead of
OpenWindow.document.write(output);callOpenWindow.init()when the dom is ready
- 在 mypage.html 中写一个函数 say init() 来做 html 的事情（ append 或什么）
- 而不是在 dom 准备好时
OpenWindow.document.write(output);调用OpenWindow.init()
So the parent window will have
所以父窗口会有
OpenWindow.onload = function(){
OpenWindow.init('test');
}
and in the child
在孩子身上
function init(txt){
$('#test').text(txt);
}
回答by TJ VanToll
When you call document.writeafter a page has loaded it will eliminate all content and replace it with the parameter you provide. Instead use DOM methods to add content, for example:
当您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);
If you want to use jQuery you get some better APIs to deal with. For example:
如果你想使用 jQuery，你会得到一些更好的 API 来处理。例如：
var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).append('<p>hi</p>');
If you need the code to run after the new window's DOM is ready try:
如果您需要在新窗口的 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>');
});
回答by Erkan ?zk?k
If you want to open a page or window with sending data POST or GET method you can use a code like this:
如果要使用发送数据 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;
}
});
