Question

如何在JavaScript中打开一个新窗口并插入HTML数据而不是仅链接到HTML文件？

Answer 1

我不建议您像其他人建议的那样使用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";

Answer 2

您可以使用 window.open 在javascript中打开新窗口/标签（根据浏览器设置）。

使用 document.write ，您可以将HTML内容写入已打开的窗口。

Answer 3

使用open创建新窗口时，它会返回对新窗口的引用，您可以使用该引用通过其document对象写入新打开的窗口。

以下是一个例子：

var newWin = open('url','windowName','height=300,width=300');
newWin.document.write('html to write...');

Answer 4

您可以按照以下代码打开新的弹出窗口：

var myWindow = window.open("", "newWindow", "width=500,height=700");
//window.open('url','name','specs');

之后，您可以使用myWindow.document.write();或myWindow.document.body.innerHTML = "HTML";

添加HTML

我建议首先创建一个具有任何名称的新html文件。在这个例子中，我正在使用

newFile.html

并确保添加该文件中的所有内容，例如bootstrap cdn或jquery，表示所有链接和脚本。然后制作一个带有一些身份证的div或使用你的身体然后给它id。在此示例中，我已将id="mainBody"提供给我的newFile.html <body>代码

<body id="mainBody">

然后使用

打开此文件

<script>    
var myWindow = window.open("newFile.html", "newWindow", "width=500,height=700");
</script>

并添加您想要添加到身体标签中的任何内容。使用以下代码

<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>

就这么简单。

Answer 5

这是使用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`
);

Answer 6

您还可以创建一个“example.html”页面，其中包含您想要的html，并将该页面的url作为window.open的参数

var url = '/example.html';
var myWindow = window.open(url, "", "width=800,height=600");

在JavaScript中打开窗口，插入HTML

6 个答案: