我如何在 JavaScript 中打开一个新窗口并插入 HTML 数据而不是仅仅链接到 HTML 文件？
在 JavaScript 中打开窗口并插入 HTML
IT技术
javascript
html
insert
2021-01-22 06:43:06
6个回答
我不建议你document.write像其他人建议的那样使用，因为如果你打开这样的窗口两次，你的 HTML 将被复制 2 次（或更多）。
改用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";
您可以使用window.open在 javascript 中打开一个新窗口/选项卡（根据浏览器设置）。
通过使用document.write，您可以将 HTML 内容写入打开的窗口。
当您使用 创建新窗口时open，它会返回对新窗口的引用，您可以使用该引用通过其document对象写入新打开的窗口。
下面是一个例子：
var newWin = open('url','windowName','height=300,width=300');
newWin.document.write('html to write...');
以下是使用 HTML Blob 执行此操作的方法，以便您可以控制整个 HTML 文档：
https://codepen.io/trusktr/pen/mdeQbKG?editors=0010
这是代码，但 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`
);您可以通过以下代码打开一个新的弹出窗口：
var myWindow = window.open("", "newWindow", "width=500,height=700");
//window.open('url','name','specs');
之后，您可以使用两者myWindow.document.write();或myWindow.document.body.innerHTML = "HTML";
我建议您首先创建一个任何名称的新 html 文件。在这个例子中，我使用
新文件.html
并确保添加该文件中的所有内容，例如 bootstrap cdn 或 jquery，即所有链接和脚本。然后用一些 id 制作一个 div 或使用你的身体并给它一个id. 在这个例子中，我给id="mainBody"了我的 newFile.html<body>标签
<body id="mainBody">
然后使用打开这个文件
<script>
var myWindow = window.open("newFile.html", "newWindow", "width=500,height=700");
</script>
并添加您想要添加到 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>
它是如此简单。