在 JavaScript 中打开窗口并插入 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2109205/
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
Open window in JavaScript with HTML inserted
提问by williamtroup
How would I open a new window in JavaScript and insert HTML data instead of just linking to an HTML file?
我如何在 JavaScript 中打开一个新窗口并插入 HTML 数据而不是仅仅链接到 HTML 文件？
采纳答案by rahul
You can use window.opento open a new window/tab(according to browser setting) in javascript.
您可以使用window.open在 javascript 中打开一个新窗口/选项卡（根据浏览器设置）。
By using document.writeyou can write HTML content to the opened window.
通过使用document.write，您可以将 HTML 内容写入打开的窗口。
回答by artnikpro
I would not recomend you to use document.writeas others suggest, because if you will open such window twice your HTML will be duplicated 2 times (or more).
我不建议您document.write像其他人建议的那样使用，因为如果您将此类窗口打开两次，您的 HTML 将被复制 2 次（或更多）。
Use innerHTML instead
改用innerHTML
var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = "HTML";
回答by Oded
When you create a new window using open, it returns a reference to the new window, you can use that reference to write to the newly opened window via its documentobject.
当您使用 创建新窗口时open，它会返回对新窗口的引用，您可以使用该引用通过其document对象写入新打开的窗口。
Here is an example:
下面是一个例子：
var newWin = open('url','windowName','height=300,width=300');
newWin.document.write('html to write...');
回答by Saurabh Pathak
You can open a new popup window by following code:
您可以通过以下代码打开一个新的弹出窗口：
var myWindow = window.open("", "newWindow", "width=500,height=700");
//window.open('url','name','specs');
Afterwards, you can add HTML using both myWindow.document.write();or myWindow.document.body.innerHTML = "HTML";
之后，您可以使用两者myWindow.document.write();或myWindow.document.body.innerHTML = "HTML";
What I will recommend is that first you create a new html file with any name. In this example I am using
我建议您首先创建一个任何名称的新 html 文件。在这个例子中，我使用
newFile.html
新文件.html
And make sure to add all content in that file such as bootstrap cdn or jquery, means all the links and scripts. Then make a div with some id or use your body and give that a id. in this example I have given id="mainBody"to my newFile.html <body>tag
并确保在该文件中添加所有内容，例如 bootstrap cdn 或 jquery，即所有链接和脚本。然后用一些 id 制作一个 div 或使用你的身体并给它一个id. 在这个例子中，我给id="mainBody"了我的 newFile.html<body>标签
<body id="mainBody">
Then open this file using
然后使用打开这个文件
<script>
var myWindow = window.open("newFile.html", "newWindow", "width=500,height=700");
</script>
And add whatever you want to add in your body tag. using following code
并添加您想要添加到 body 标签中的任何内容。使用以下代码
<script>
var myWindow = window.open("newFile.html","newWindow","width=500,height=700");
myWindow.onload = function(){
let content = "<button class='btn btn-primary' onclick='window.print();'>Confirm</button>";
myWindow.document.getElementById('mainBody').innerHTML = content;
}
myWindow.window.close();
</script>
it is as simple as that.
它是如此简单。
回答by Tamer Durgun
You can also create an "example.html" page which has your desired html and give that page's url as parameter to window.open
您还可以创建一个“example.html”页面，其中包含所需的 html，并将该页面的 url 作为参数提供给 window.open
var url = '/example.html';
var myWindow = window.open(url, "", "width=800,height=600");
回答by trusktr
Here's how to do it with an HTML Blob, so that you have control over the entire HTML document:
以下是使用 HTML Blob 执行此操作的方法，以便您可以控制整个 HTML 文档：
https://codepen.io/trusktr/pen/mdeQbKG?editors=0010
https://codepen.io/trusktr/pen/mdeQbKG?editors=0010
This is the code, but StackOverflow blocks the window from being opened (see the codepen example instead):
这是代码，但 StackOverflow 阻止打开窗口（请参阅 codepen 示例）：
const winHtml = `<!DOCTYPE html>
<html>
<head>
<title>Window with Blob</title>
</head>
<body>
<h1>Hello from the new window!</h1>
</body>
</html>`;
const winUrl = URL.createObjectURL(
new Blob([winHtml], { type: "text/html" })
);
const win = window.open(
winUrl,
"win",
`width=800,height=400,screenX=200,screenY=200`
);