JavaScript 动态网页实例 —— 打开与关闭窗口_js关闭当前页面打开新的页面-优快云博客

本文链接：https://blog.youkuaiyun.com/cccloveforever/article/details/138782254

本文详细介绍了JavaScript中如何进行窗口的打开、关闭、写入和交互，以及如何使用警告、提示和确认对话框。通过实例代码展示了如何利用Window对象的open()、close()、document.writeln()等方法实现动态网页效果，同时讲解了DOM操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

窗口的类型和操作很多，本章介绍窗口的基本操作:打开窗口与关闭窗口。同时，还介绍了窗口写入的方法，以及基于写入基础上的窗口交互。对话框作为一种特殊的窗口，在程序设计中的应用非常普遍。常见的对话框包括警告对话框、提示对话框和确认对话框。这些对话框的使用比较简单，本章将举例说明其用法。

打开窗口

打开新的浏览器窗口的方法很多，本节给出一个打开新窗口的实例，实现用4种不同的方法打开新的窗口。

要点

本节代码主要使用了 Window对象的open()方法、<body>标签的onload属性,以及HTML中的无序列表，其主要功能和用法如下。
Window对象提供了 open()方法，用于打开一个新的浏览器窗口。打开一个窗口时，可以设置其 URL、名称、大小、按钮以及其他属性。
open()方法的基本语法结构为“window.open(url,name,features,replace)”，其中，url是要在新窗口打开的文档的 URL地址;name 是要打开的窗口的名字，用 HTML 链接的 target属性进行定位时会有用;features 是一个用逗号分隔的字符串,列举了窗口的特征;replace 是一个可选的 Boolean 值，指出是否允许URL替换窗口的内容。适用于已创建的窗口。
<body>标签中可以添加 onload 属性，表示该页面载入时发生的事件。其使用方法为“οnlοad="javascript:JavaScript 代码"”，其中的“JavaScript 代码”也可以是一个已定义的JavaScript 函数。
在HTML中，无序列表是一个项目的序列，各项目前加有标记(通常是黑色的圆点)。
无序列表以<ul>标签开始，每个列表项目以<1i>开始。列表的项目中可以加入段落、换行、图像、链接，甚至其他列表等。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>打开窗口</title>
</head>
<body onload="javascript: secondwindow = open('http://www.baidu.com',
 '百度', 'height=300,width=200,scrollbars=yes');">
<h1>打开窗口</h1><hr>
<h5>打开新窗口的常见方法：</h5>
<pre><ul>
<li>页面载入时打开窗口</li>
<li>使用超级链接打开窗口</li>
<li>使用按钮接打开窗口</li>
<li>感应鼠标动作打开窗口</li>
</ul></pre>

<!--用链接的onclick调用open()来打开新窗口-->
<a href="#" onclick="javascript: secondwindow = open('http://www.百度.com',
 '百度', 'height=300,width=200,scrollbars=yes');">使用链接打开窗口</a>

<!--用按钮的onclick调用open()来打开新窗口-->
<form action="#" method="get">
<input type="button" value="使用按钮打开窗口" onclick="secondwindow =
            open('http://www.百度.com','百度','height=300,width=200,scrollbars=yes');" >
</form>

<!--用文字的onmouseover调用open()来打开新窗口-->
<p onmouseover="javascript: secondwindow = open('http://www.百度.com',
 '百度', 'height=300,width=200,scrollbars=yes');">鼠标移动到这里打开窗口</p>
</body>
</html>