Window 对象是浏览器环境中的全局对象,代表浏览器窗口。以下是 Window 对象最常用的方法分类介绍:
一、对话框方法
1. alert() - 显示警告对话框
window.alert('这是一个警告消息');
2. confirm() - 显示确认对话框
const result = window.confirm('您确定要删除吗?');
if(result) {
// 用户点击了确定
}
3. prompt() - 显示提示输入对话框
const name = window.prompt('请输入您的名字', '默认值');
对话框方法相关面试题:
1. 列举 Window 对象提供的三种对话框方法,并说明它们各自的用途和区别。
2. 为什么在现代前端开发中不推荐使用这些对话框方法?
二、定时器方法
1. setTimeout() - 延迟执行,执行1次。
const timerId = setTimeout(() => {
console.log('延迟执行');
}, 1000);
2. setInterval() - 循环执行,执行无数次。
const intervalId = setInterval(() => {
console.log('每隔1秒执行');
}, 1000);
3. clearTimeout()/clearInterval() - 清除定时器
clearTimeout(timerId);
clearInterval(intervalId);
定时器方法相关面试题:
请解释 setTimeout 和 setInterval 的区别,并写出清除它们的对应方法。
什么是"零延时 setTimeout"(setTimeout(fn, 0))?它有什么实际应用场景?
三、窗口控制方法
1. open() - 打开新窗口
const newWindow = window.open('https://www.html20.com', '_blank', 'width=500,height=500');
2. close() - 关闭窗口
window.close(); // 关闭当前窗口
3. moveTo()/moveBy() - 移动窗口
window.moveTo(100, 100); // 移动到指定坐标
window.moveBy(50, 50); // 相对当前位置移动
4. resizeTo()/resizeBy() - 调整窗口大小
window.resizeTo(800, 600); // 调整到指定尺寸
window.resizeBy(-100, -50); // 相对当前尺寸调整
窗口控制方法相关面试题
如何使用 Window 方法打开一个新窗口?如何确保它在大多数浏览器中不会被弹出拦截器阻止?
window.open() 方法的返回值是什么?如何通过这个返回值控制新打开的窗口?
四、滚动控制方法
1. scrollTo() - 滚动到指定位置。scroll() - scrollTo()的别名
window.scrollTo(0, 1000); // 滚动到Y轴1000px位置
window.scrollTo({ top: 1000, behavior: 'smooth' }); // 平滑滚动
2. scrollBy() - 相对当前位置滚动
window.scrollBy(0, 100); // 向下滚动100px
滚动控制方法相关面试题
列举三种控制窗口滚动行为的 Window 方法,并简要说明它们的作用。
如何实现平滑滚动到页面顶部的功能?请写出代码示例。
五、请求动画帧
1. requestAnimationFrame() - 动画优化方法
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
2. cancelAnimationFrame() - 取消动画帧请求
请求动画帧相关面试题:
requestAnimationFrame 相比 setTimeout 或 setInterval 实现动画有什么优势?
请写出使用 requestAnimationFrame 实现一个简单动画的代码框架。
六、事件相关方法
1. addEventListener() - 添加事件监听
window.addEventListener('resize', () => {
console.log('窗口大小改变了');
});
2. removeEventListener() - 移除事件监听
3. dispatchEvent() - 触发事件
事件监听相关面试题:
window.addEventListener 和直接给 window.onEvent 赋值有什么区别?
如何监听浏览器窗口大小变化事件?请写出代码示例。
七、存储相关方法
1. localStorage - 本地持久存储
localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');
2. sessionStorage - 会话期存储
sessionStorage.setItem('sessionKey', 'tempValue');
储存方法相关面试题:
window.localStorage 和 window.sessionStorage 有什么区别?
如何监听其他标签页对 localStorage 的修改?
想通过面试题更进一步了解window方法的,移步js中window方法相关面试题及答案