1. window.alert()
用于显示一个警告框,带有指定的消息和一个“确定”按钮。
1 | window.alert( 'Hello, World!' ); |
2. window.confirm()
显示一个对话框,带有“确定”和“取消”按钮,返回一个布尔值表示用户选择的操作。
1 2 3 4 5 6 | const isConfirmed = window.confirm( 'Are you sure you want to proceed?' ); if (isConfirmed) { console.log( 'User confirmed' ); } else { console.log( 'User canceled' ); } |
3. window.prompt()
显示一个对话框,要求用户输入一些文本,返回用户输入的内容。如果用户点击取消,返回 null。
4. window.setTimeout()
设置一个延迟执行的函数,单位是毫秒。指定的函数将在延迟后被执行。
5. window.setInterval()
设置一个周期性执行的函数,指定的函数将在每个指定的时间间隔后被执行。
6. window.clearTimeout()
7. window.open()
打开一个新的浏览器窗口或标签页,指定的 URL 会被加载到新窗口中。
1 | const newWindow = window.open( 'https://www.example.com' , '_blank' ); |
window.open 的常用参数:
第一个参数:要打开的 URL 地址(也可以为空)。
第二个参数:窗口的名称(例如 _blank 打开新标签,_self 打开当前窗口)。
第三个参数:设置新窗口的特性,如宽高、是否显示工具栏等。
8. window.close()
关闭当前浏览器窗口。如果窗口是由 window.open() 打开的,则可以关闭该窗口。
9. window.scrollTo()
滚动页面到指定的坐标位置。
1 | window.scrollTo(0, 500); // 滚动到垂直坐标 500 的位置 |
10. window.scrollBy()
滚动页面相对于当前视口的坐标。
1 | window.scrollBy(0, 100); // 页面向下滚动 100 像素 |
11. window.resizeTo()
调整浏览器窗口的大小,接受新的宽度和高度作为参数
1 | window.resizeTo(800, 600); // 将窗口的尺寸调整为 800px x 600px |
12. window.resizeBy()
1 | window.resizeBy(200, 200); // 增加 200px 的宽度和 200px 的高度 |
13. window.scrollX 和 window.scrollY
这两个属性返回当前页面在水平和垂直方向上已滚动的像素数。
1 2 | console.log(window.scrollX); // 水平滚动位置 console.log(window.scrollY); // 垂直滚动位置 |
14. window.location
window.location 对象包含了有关当前 URL 的信息,并允许你修改浏览器的 URL 来实现页面导航。
window.location.href: 获取或设置当前页面的 URL。
window.location.assign(): 导航到新 URL。
window.location.replace(): 导航到新 URL,但不会留下历史记录(即无法使用浏览器的回退按钮返回原页面)。
1 2 3 4 | console.log(window.location.href); //获取当前 URL window.location.href = 'https://www.example.com' ; /* 导航到新 URL */ window.location.assign( 'https://www.example.com' ); /* 等同于设置 href */ window.location.replace( 'https://www.example.com' ); /* 不留历史记录 */ |
15. window.localStorage 和 window.sessionStorage
这两个对象提供了在客户端存储数据的方法。
localStorage: 用于持久化存储数据,数据会一直保留,直到手动清除。
sessionStorage: 用于存储数据,数据在浏览器会话结束时清除。
1 2 3 4 5 6 7 | localStorage.setItem( 'username' , 'JohnDoe' ); const user = localStorage.getItem( 'username' ); console.log(user); // JohnDoe sessionStorage.setItem( 'sessionKey' , 'abc123' ); const sessionValue = sessionStorage.getItem( 'sessionKey' ); console.log(sessionValue); // abc123 |
16. window.history
window.history 对象允许你操作浏览器的历史记录。
history.back(): 返回上一页。
history.forward(): 前进到下一页。
history.go(): 返回或前进指定的页面数。
1 2 3 4 | window.history.back(); // 返回上一页 window.history.forward(); // 前进到下一页 window.history.go(-1); // 返回上一页,等同于 back window.history.go(2); // 前进两页 |
17. window.matchMedia()
用于检查当前的视口是否匹配某个 CSS 媒体查询,返回一个 MediaQueryList 对象。
1 2 3 4 5 6 | const mediaQuery = window.matchMedia( '(max-width: 600px)' ); if (mediaQuery.matches) { console.log( 'The viewport is 600px wide or less' ); } else { console.log( 'The viewport is wider than 600px' ); } |
18. window.getComputedStyle()
返回指定元素的所有计算样式。
1 2 3 | const element = document.querySelector( 'div' ); const computedStyle = window.getComputedStyle(element); console.log(computedStyle.backgroundColor); // 获取背景颜色 |
19. window.addEventListener()
用于在指定的事件类型发生时为 window 对象添加事件监听器。
1 2 3 | window.addEventListener( 'resize' , () => { console.log( 'Window resized' ); }); |