您好!欢迎访问家园网-www.jy.wang!

家园网

前端常用的window方法

网络 作者:本站 点击:24

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');
});


标签: