在新窗口中添加内容-JavaScript中文网-JavaScript教程资源分享门户

当我们需要在一个网页中打开另一个页面时，可以使用 JavaScript 打开一个新的浏览器窗口并在其中加载内容。在这篇文章中，我们将深入探讨如何在新窗口中添加内容。

使用 window.open() 方法打开新窗口

要在一个新的浏览器窗口中打开一个 URL，可以使用 window.open() 方法。该方法接受三个参数：URL、窗口名称和窗口特性。例如，以下代码会在一个新窗口中打开 Google：

window.open('https://www.google.com', 'Google', 'width=600,height=400');

第一个参数是要打开的 URL，第二个参数是窗口的名称，第三个参数是窗口的特性，比如宽度和高度。特性可以包括诸如位置、外观和滚动条等。

在新窗口中添加 HTML 内容

一旦打开了一个新窗口，就可以使用 document.write() 方法将 HTML 内容添加到其中。例如，以下代码会在新窗口中添加一个标题和一个段落：

var newWindow = window.open('', 'New Window', 'width=600,height=400');
newWindow.document.write('<html><head><title>New Window</title></head><body><h1>Hello World!</h1><p>This is a new window.</p></body></html>');
newWindow.document.close();

注意，在使用 document.write() 方法时，必须先使用 document.open() 方法以便打开窗口的文档流。最后，使用 document.close() 方法关闭文档流。

在新窗口中添加动态内容

除了静态 HTML 内容外，还可以在新窗口中添加动态生成的内容。例如，以下代码会在新窗口中显示当前日期和时间：

var newWindow = window.open('', 'New Window', 'width=600,height=400');
var currentTime = new Date();
newWindow.document.write('<html><head><title>New Window</title></head><body><h1>Hello World!</h1><p>The current time is ' + currentTime.toString() + '.</p></body></html>');
newWindow.document.close();

这段代码中，我们创建了一个 Date 对象来获取当前的日期和时间，并将它们添加到新窗口中。

小结

在本文中，我们学习了如何在新窗口中添加静态和动态内容。通过使用 window.open() 方法和 document.write() 方法，我们可以轻松地在新窗口中加载任何需要的内容。这种技术在 Web 开发中非常有用，可以用于显示弹出窗口、显示详细信息等。希望这篇文章能够帮助你深入了解如何在新窗口中添加内容。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25851