Window的Open方法，弹窗的特征【超详细篇】

Hi i,m JinXiang

---

⭐ 前言 ⭐

本篇文章主要介绍在在JavaScript中window的OPen方法，弹窗的特征以及部分理论知识

---

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

---

目录

⭐ 一、window

1、什么是window

2、使用window

常见的window代码示例

3、总结window方法

⭐二、window的open方法

1、什么是window的open方法

open方法的语法

open方法的注意事项

2、使用window的open方法

open方法的参数说明

open方法的代码示例

3、总结window的open方法

⭐三、弹窗的特征

1、什么是弹窗

弹窗的特征：

2、使用弹窗

3、总结弹窗的特征

---

 一、window

1、什么是window

在JavaScript中，window是一个全局对象，表示当前浏览器窗口或标签页。它包含了浏览器提供的许多方法和属性，用于操作窗口、文档和浏览器环境。可以通过window对象来访问和操作浏览器窗口的属性和方法，例如window.alert()、window.location等。此外，window对象也是全局作用域的顶层对象，因此全局定义的变量和函数实际上成为了window对象的属性和方法。

2、使用window

在JavaScript中，可以直接使用window对象来访问窗口对象的属性和方法。以下是一些常用的window对象的属性和方法的示例：

1. 弹出警告框：window.alert('Hello World!');
2. 弹出确认框：window.confirm('Are you sure?');
3. 打开一个新的窗口或标签页：window.open('Jin_Xiang23_Java,开发语言,前端-CSDN博客', '_blank');
4. 关闭当前窗口或标签页：window.close();
5. 获取当前窗口的宽度和高度：window.innerWidth和window.innerHeight
6. 获取当前窗口的滚动条位置：window.scrollX和window.scrollY
7. 重载当前窗口：window.location.reload();
8. 跳转到另一个URL：window.location.href = 'https://www.example.com';
9. 获取当前窗口的URL：window.location.href
10. 获取浏览器的用户代理字符串：window.navigator.userAgent

以上仅是一些常用的方法和属性，window对象还有许多其他方法和属性，可根据具体需求进行使用。

---

在JavaScript中，可以使用window对象来访问和操作浏览器窗口的各种属性和方法。

下面是一些

常见的window操作示例：

1、打开（open）：打开一个新窗口或标签页

window.open("https://blog.csdn.net/Jin_Xiang123?type=blog", "_blank");

2、关闭（close）：关闭当前窗口

window.close();

3、获取（clientWidth clientHeight ）：获取当前窗口的宽度和高度

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

4、滚动（scrollTo）：滚动到页面的顶部

window.scrollTo(0, 0);

5、弹出消息框（alert）：弹出一个消息框

window.alert("This is an alert message!");

6、弹出确认框（confirm）：弹出一个" 是 / 否 "确认框

var result = window.confirm("Are you sure?");
if (result) {
  // 用户点击了确定按钮
} else {
  // 用户点击了取消按钮
}

7、时间函数（setTimeout）：在指定的时间间隔后执行某个函数

window.setTimeout(function() {
  // 在2000毫秒后执行该函数
  console.log("Hello, world!");
}, 2000);

以上只是一些常见的使用window对象的例子，实际上window对象提供了很多其他属性和方法，可以根据具体需求进行使用。

3、总结window方法

方法/属性	描述
alert(message)	弹出警告框，显示指定的消息
confirm(message)	弹出确认框，显示指定的消息，并返回用户的选择结果（true或false）
open(url, name)	打开一个新窗口或标签页，可指定URL和窗口的名称
close()	关闭当前窗口或标签页
innerWidth	获取当前窗口的宽度
innerHeight	获取当前窗口的高度
scrollX	获取当前窗口的水平滚动条位置
scrollY	获取当前窗口的垂直滚动条位置
location.reload()	重新加载当前窗口
location.href	获取或设置当前窗口的URL
navigator.userAgent	获取浏览器的用户代理字符串
setTimeout(func, delay)	在指定的延迟时间后执行函数
setInterval(func, interval)	每隔指定的时间间隔执行函数
clearTimeout(timeoutID)	取消之前通过setTimeout设置的延迟执行操作
clearInterval(intervalID)	取消之前通过setInterval设置的定时执行操作

以上是一些常用的window对象的方法和属性，在JavaScript中使用window对象可以实现对窗口的操作和获取窗口信息。

二、window的open方法

1、什么是window的open方法

window.open()方法是JavaScript中用来打开一个新窗口或标签页的方法。它接受两个参数：URL和窗口的名称（可选）。通过调用window.open()方法，可以在浏览器中打开一个新的浏览器窗口或标签页，并加载指定的URL。

open方法的语法：

window.open(url, name);

open方法的参数说明：

• url：要打开的URL地址，可以是绝对URL或相对URL。
• name：窗口的名称，可选。可以是已经打开窗口的名称（在同一窗口名称下打开的新窗口会在同一个窗口中加载），也可以是新窗口的名称。

open方法的注意事项：

• 当使用window.open()方法打开新窗口时，浏览器可能会阻止弹出窗口或标签页，具体是否被阻止由浏览器的设置和用户的浏览器规则决定。
• window.open()方法返回一个表示新窗口的window对象的引用，可以用来对新窗口进行后续操作，如在新窗口中加载页面、关闭窗口等。

代码示例：

window.open("https://blog.csdn.net/Jin_Xiang123?type=blog", "myWindow");

以上代码将在浏览器中打开一个新窗口，并加载"http://www.example.com"网页，窗口的名称为"myWindow"。

2、使用window的open方法

在JavaScript中，可以使用window.open()方法来打开一个新窗口或标签页。

使用语法如下：

window.open(url, name, options);

open方法的参数说明：

• url：要打开的URL地址，可以是绝对URL或相对URL。
• name：窗口的名称，可选。可以是已经打开窗口的名称（在同一窗口名称下打开的新窗口会在同一个窗口中加载），也可以是新窗口的名称。
• options：窗口的选项，可选。可以是一个字符串或一个包含窗口选项的对象。

open方法的常用的窗口选项：

• "width=xxx"：指定窗口的宽度，以像素为单位。
• "height=xxx"：指定窗口的高度，以像素为单位。
• "top=xxx"：指定窗口的上边距，以像素为单位。
• "left=xxx"：指定窗口的左边距，以像素为单位。
• "resizable=yes/no"：指定窗口是否可以被用户调整大小。
• "scrollbars=yes/no"：指定窗口是否显示滚动条。
• "toolbar=yes/no"：指定窗口是否显示工具栏。
• "location=yes/no"：指定窗口是否显示地址栏。
• "status=yes/no"：指定窗口是否显示状态栏。

open方法的代码示例：

window.open("https://blog.csdn.net/Jin_Xiang123?type=blog", "myWindow", "width=500,height=400,resizable=yes");

以上代码将在浏览器中打开一个新窗口，并加载"Jin_Xiang23_Java,开发语言,前端-CSDN博客"网页，窗口的名称为"myWindow"，窗口的宽度为500像素，高度为400像素，同时可以由用户调整大小。

3、总结window的open方法

方法	说明
window.open()	打开一个新窗口或标签页
参数	描述
url	要打开的URL地址，可以是绝对URL或相对URL
name	窗口的名称，可选。可以是已经打开窗口的名称或新窗口的名称
options	窗口的选项，可选。可以是一个字符串或一个包含窗口选项的对象
常用选项
width	窗口的宽度，以像素为单位
height	窗口的高度，以像素为单位
top	窗口的上边距，以像素为单位
left	窗口的左边距，以像素为单位
resizable	窗口是否可以被用户调整大小，可选值为yes或no
scrollbars	窗口是否显示滚动条，可选值为yes或no
toolbar	窗口是否显示工具栏，可选值为yes或no
location	窗口是否显示地址栏，可选值为yes或no
status	窗口是否显示状态栏，可选值为yes或no

三、弹窗的特征

1、什么是弹窗

在JavaScript中，弹窗是一种用于在浏览器窗口中显示信息的小窗口。它可以用来显示警告、确认、输入、提示等类型的消息给用户。弹窗通常是通过调用window.alert()、window.confirm()和window.prompt()等函数来实现的。下面是这些弹窗的简要描述：

• window.alert(message)：弹出一个包含指定消息和一个"确定"按钮的警告框，用于向用户显示一条信息。它只有一个按钮，点击确定后弹窗会自动关闭。
• window.confirm(message)：弹出一个包含指定消息、一个"确定"按钮和一个"取消"按钮的确认框，用于向用户显示一条信息并接受用户的确认或取消选择。用户可以点击确定或取消按钮来关闭弹窗，并根据选择返回true或false。
• window.prompt(message, defaultText)：弹出一个包含指定消息、一个文本框、一个"确定"按钮和一个"取消"按钮的提示框，用于向用户显示一条信息并接受用户输入。用户可以在文本框中输入内容，并点击确定或取消按钮来关闭弹窗。根据用户的选择返回输入内容或null。

这些弹窗函数提供了一种简单的方式来与用户进行交互，显示消息、确认选择或接受输入。它们是JavaScript中常用的一种交互方式，但在现代网页开发中被认为是一种不太优雅的交互方式，因此在实际开发中可能会更倾向于使用更灵活和自定义性更强的弹窗组件或模态框。

---

弹窗的特征：

弹窗（Pop-up）指的是在浏览器窗口上方弹出的小窗口，用于显示一些消息、警告、确认框等等。弹窗的特征如下：

1. 显示位置：弹窗通常会在当前页面的中心或者用户指定的位置显示。

2. 交互性：弹窗可以与用户进行交互，例如用户可以点击确定或取消按钮，输入一些信息等。

3. 覆盖性：弹窗通常会覆盖当前页面，使得用户无法在其下方进行操作，直到关闭弹窗。

4. 强制性：弹窗会引起用户注意，并且通常要求用户必须对其进行处理才能继续后续操作。

5. 可定制性：弹窗的外观和行为可以根据开发者的需求进行定制，包括窗口大小、背景色、按钮样式等。

在JavaScript中，可以使用window的alert、confirm和prompt方法来创建不同类型的弹窗。

• window.alert方法用于显示一个简单的警告弹窗，只包含一个确定按钮。
• window.confirm方法显示一个确认弹窗，包含确定和取消按钮，用户可以选择是否继续操作。
• window.prompt方法显示一个输入弹窗，需要用户输入一些信息并返回输入的值。

弹窗是一种常见的交互方式，但也需要谨慎使用，过多或过频繁的弹窗可能会打断用户的操作流程，影响用户体验。

2、使用弹窗

在JavaScript中，可以使用window对象的open()方法来创建弹窗。open()方法接受三个参数：URL、窗口名称和特性字符串。

以下是使用open()方法创建弹窗的示例代码：

// 打开一个新窗口，显示指定的URL
window.open('https://blog.csdn.net/Jin_Xiang123?type=blog', 'NewWindow', 'width=500,height=300');

// 打开一个新窗口，不显示URL
window.open('', 'NewWindow', 'width=500,height=300');

// 打开一个新窗口，显示指定的HTML内容
window.open('', 'NewWindow', 'width=500,height=300').document.write('<h1>Hello, World!</h1>');

上述代码中，第一个参数是URL，可以是一个外部网址或者当前网站内的相对路径；第二个参数是窗口名称，可以是新窗口的名称或者一个标识符；第三个参数是特性字符串，用于指定窗口的大小、位置和其他特性。

特性字符串可以包含以下选项：

• width：窗口宽度
• height：窗口高度
• left：窗口左边距
• top：窗口上边距
• resizable：是否可调整大小
• scrollbars：是否显示滚动条
• status：是否显示状态栏
• toolbar：是否显示工具栏

请注意，由于弹窗常被浏览器拦截器阻止，所以弹窗功能可能需要用户进行浏览器设置的更改，或者在点击触发弹窗的事件处理程序时使用特定的用户交互行为，如鼠标点击。

3、总结弹窗的特征

特征	描述
大小	可以设置弹窗的宽度和高度
位置	可以设置弹窗的左边距和上边距
调整大小	可以设置弹窗是否可以调整大小
滚动条	可以设置弹窗是否显示滚动条
状态栏	可以设置弹窗是否显示状态栏
工具栏	可以设置弹窗是否显示工具栏
URL显示	可以显示指定的URL或者不显示URL
HTML内容显示	可以显示指定的HTML内容
触发方式	通常需要用户交互行为触发，如点击链接、按钮或执行特定的事件处理程序
浏览器设置	弹窗可能被浏览器拦截器阻止，需要进行浏览器设置或用户确认

请注意，弹窗功能在现代浏览器中受到限制，因为它们经常被用于恶意目的。因此，使用弹窗时需要谨慎，并确保只在必要的情况下使用。

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！如有问题，欢迎评论区批评指正😁