JavaScript

JavaScript 知识量:26 - 101 - 483

11.1 window对象><

window对象简介- 11.1.1 -

BOM的核心是window对象,表示浏览器的实例。window对象在浏览器中有两重身份,一个是ECMAScript中的Global对象,另一个就是浏览器窗口的JavaScript接口。

window对象是JavaScript中的顶级对象,它代表了浏览器窗口和与之相关的对象。window对象具有许多属性和方法,这些属性和方法可以用于控制浏览器窗口、执行脚本操作、处理导航和引用其他对象等。

以下是一些window对象的常见属性和方法:

属性:

  • window.innerHeight:浏览器窗口的内部高度(以像素为单位)。

  • window.innerWidth:浏览器窗口的内部宽度(以像素为单位)。

  • window.outerHeight:浏览器窗口的外部高度(包括工具栏和滚动条)。

  • window.outerWidth:浏览器窗口的外部宽度(包括工具栏和滚动条)。

  • window.screenX:屏幕的左上角相对于浏览器窗口的水平坐标。

  • window.screenY:屏幕的左上角相对于浏览器窗口的垂直坐标。

  • window.history:浏览器的历史记录对象,用于前进、后退等操作。

  • window.location:当前页面的位置对象,可以用于获取和设置页面的 URL。

  • window.document:对当前窗口或帧的 document 对象的引用。

方法:

  • window.alert(message):显示带有一段消息和一个确定按钮的警告框。

  • window.confirm(message):显示带有一段消息和确定/取消按钮的确认框。

  • window.prompt(message, defaultText):显示带有一段消息和一个文本输入字段的提示框。

  • window.setTimeout(func, delay):在指定的延迟后执行函数。

  • window.setInterval(func, delay):每隔指定的延迟重复执行函数。

  • window.clearTimeout(id):取消由 setTimeout() 函数创建的定时器。

  • window.clearInterval(id):取消由 setInterval() 函数创建的定时器。

  • window.prompt():创建一个对话框,其中包含输入字段和 OK 及 Cancel 按钮。

以上只是window对象属性和方法的一部分,还有其他更多属性和方法可供使用。

Global作用域- 11.1.2 -

在JavaScript中,window对象是客户端JavaScript的全局对象,它代表了浏览器窗口。在浏览器环境中,每个窗口(window)对象都是一个全局作用域(global scope)。

全局作用域是JavaScript中作用域的一种,当代码在全局作用域中执行时,它可以在其内部访问和操作任何变量和函数。这意味着在window对象中定义的任何变量或函数都可以在整个窗口环境中访问和使用。

例如,如果在window对象中定义了一个变量或函数:

window.myVariable = "Hello World";  
function myFunction() {  
  // some code here  
}

那么在相同窗口中的任何脚本或函数都可以通过直接引用window对象来访问这些变量和函数:

console.log(window.myVariable); // 输出 "Hello World"  
window.myFunction(); // 调用 myFunction 函数

此外,当在浏览器环境中执行JavaScript代码时,全局作用域实际上是最高级别的作用域。这意味着在任何脚本或函数外部定义的变量和函数都将成为window对象的成员。

窗口关系- 11.1.3 -

在JavaScript中,window.parent、window.top和window.self都是用来引用窗口或框架的特定部分的。

  • window.parent:这个属性用来返回当前窗口的父窗口。如果当前窗口就是顶层窗口,那么window.parent返回的是对自身的引用。

  • window.top:这个属性用来返回顶层窗口,即浏览器窗口。如果当前窗口本身就是顶层窗口,那么window.top返回的是对自身的引用。

  • window.self:这个属性是对当前窗口自身的引用,它和window属性是等价的。

在应用有frameset或者iframe的页面时,这些属性是非常有用的,它们可以帮助你更好地控制窗口和框架之间的交互。

窗口位置与像素比- 11.1.4 -

窗口位置和像素比是浏览器窗口的两种不同属性。

窗口位置可以通过screenLeft和screenTop属性获取,也可以通过moveTo()和moveBy()方法进行调节。screenLeft和screenTop分别获取浏览器窗口相对于屏幕左侧和顶部的位置,单位是CSS像素。moveTo(x,y)和moveBy(x,y)方法则用于移动窗口到指定位置或相对当前位置的(x,y)坐标处。

像素比是物理像素与逻辑像素之间的比值,可以通过window.devicePixelRatio属性获取。在屏幕分辨率一定的情况下,像素比决定了图像在浏览器窗口中的清晰程度。

窗口大小- 11.1.5 -

窗口大小主要是指浏览器窗口的尺寸。在JavaScript中,可以使用以下属性来获取浏览器窗口的大小:

  • window.innerHeight:浏览器窗口的内部高度(以像素为单位),包括滚动条。

  • window.innerWidth:浏览器窗口的内部宽度(以像素为单位),包括工具栏和滚动条。

  • window.outerHeight:浏览器窗口的外部高度(以像素为单位),包括工具栏和标题栏。

  • window.outerWidth:浏览器窗口的外部宽度(以像素为单位),包括工具栏和标题栏。

例如,以下代码可以获取窗口的宽度和高度:

var width = window.innerWidth;    
var height = window.innerHeight;    
console.log("窗口宽度:" + width + "px,窗口高度:" + height + "px");

注意:在部分老版本的浏览器中,可能需要将window对象作为上下文传递给console.log等函数,才能正确输出窗口大小。例如,可以将上述代码修改为:

console.log("窗口宽度:" + window.innerWidth + "px,窗口高度:" + window.innerHeight + "px");

视口位置- 11.1.6 -

视口位置是指浏览器窗口相对于浏览器左上角的位置,可以通过window.scrollX和window.scrollY属性获取。这些属性分别返回水平方向(scrollX)和垂直方向(scrollY)的滚动像素值,表示窗口在页面上的位置。例如,如果浏览器窗口的左上角位于页面的左侧100像素处,并且窗口向下滚动了200像素,那么window.scrollX将返回100,而window.scrollY将返回200。

以下是一段示例代码:

var x = window.scrollX;  
var y = window.scrollY;  
  
console.log("视口的水平位置: " + x);  
console.log("视口的垂直位置: " + y);

注意:在某些浏览器(例如旧版本的Firefox)中,可能需要使用window.pageXOffset和window.pageYOffset替代window.scrollX和window.scrollY。因此,更兼容的写法可能是:

var x = window.pageXOffset || window.scrollX;  
var y = window.pageYOffset || window.scrollY;  
  
console.log("视口的水平位置: " + x);  
console.log("视口的垂直位置: " + y);

在这个示例中,如果pageXOffset和pageYOffset不可用,那么将使用scrollX和scrollY。

导航与打开新窗口- 11.1.7 -

在JavaScript中,可以使用window.open()方法来导航或打开一个新的窗口。

如果传递给window.open()的第一个参数是一个URL,且没有传递第二个参数,则会在当前窗口中打开这个URL。

如果传递给window.open()的第一个参数是一个URL,且传递了一个或多个第二个参数,则会尝试在当前窗口或新窗口中打开这个URL,根据第二个参数的内容来决定。

如果传递给window.open()的第二个参数不是一个已经存在的框架或窗口,那么该方法就会根据在第三个参数位置传入的字符串创建一个新窗口或标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口。在打不开新窗口的情况下,会忽略第三个参数。第三个参数是一个逗号分隔的设置字符串,表示在新窗口中显示哪些特性。

以下是使用window.open()方法来导航或打开一个新的窗口的示例:

// 打开一个新的窗口或标签页,并跳转到指定的URL
window.open("https://www.example.com", "_blank");

// 在当前窗口中打开指定的URL
window.open("https://www.example.com", "_self");

// 在指定的框架中打开指定的URL
window.open("https://www.example.com", "targetFrameName");

定时器- 11.1.8 -

JavaScript中有几种类型的定时器,可以使用 setTimeout(),setInterval() 和 setImmediate() 来创建。

1. setTimeout():这个函数会在指定的毫秒数之后运行一次函数。例如:

// 在2秒(2000毫秒)后打印 "Hello World"
setTimeout(function() { console.log('Hello World'); }, 2000);

也可以使用箭头函数作为第一个参数,如 :

setTimeout(() => { console.log('Hello World'); }, 2000);

2. setInterval():这个函数会以指定的间隔(毫秒)重复运行函数。例如:

// 每秒打印一次 "Hello World"
setInterval(function() { console.log('Hello World'); }, 1000);

就像 setTimeout(),也可以使用箭头函数作为第一个参数。

注意:setTimeout() 和 setInterval() 都会返回一个ID,可以使用 clearTimeout() 或 clearInterval()(需要传递相同的ID作为参数)来取消定时器。

例如:

let timeoutId = setTimeout(() => {  
    console.log('Hello World');  
}, 2000);  
  
clearTimeout(timeoutId); // 这将取消定时器,所以 "Hello World" 不会被打印

3. setImmediate():这个函数会尽快在I/O事件之前运行函数。这意味着它会立即运行在事件循环的当前迭代中的所有代码之后,但是在浏览器环境下它并不是一个真正的“立即”执行,因为在浏览器环境中I/O事件(例如用户交互)可能会被阻塞。

注意:setImmediate() 在node.js环境中可用,但在浏览器环境中不可用。相反,浏览器环境提供了 requestAnimationFrame() 和 MessageChannel,可以用作替代。

系统对话框- 11.1.9 -

在JavaScript中,有几种方法可以创建系统对话框。以下是两个最常见的例子:

1. alert():这是最简单的对话框,它显示一个包含指定消息和“确定”按钮的警告框。

alert("这是一个警告对话框");

2. confirm():这个对话框有两个按钮:确定和取消。如果用户点击确定,返回true;如果用户点击取消,返回false。

let userResponse = confirm("这是一个确认对话框");  
if (userResponse) {  
    console.log("用户点击了确定按钮");  
} else {  
    console.log("用户点击了取消按钮");  
}

这些都是浏览器默认的对话框样式,不过这些对话框的样式无法通过JavaScript代码直接更改。如果想要创建自定义样式的对话框,可能需要使用HTML和CSS来创建,或者使用一些第三方库如Bootstrap,jQuery UI等。

这些是基础的浏览器兼容的对话框,不过某些特定的浏览器可能会有特定的API来提供更详细的控制。例如,prompt()函数在某些浏览器中可以使用,它提供一个输入字段以及确定和取消按钮。

注意:虽然这些对话框函数在大多数现代浏览器中都能正常工作,但并不是所有浏览器都会完全支持这些函数。在一些现代的浏览器(如Chrome和Firefox)中,还提供了一些额外的API,如Notification接口,可以让开发者创建更加自定义的通知。这些通知可以在用户的操作系统的通知中心中显示,而不是在浏览器的弹窗中显示。