javascript中 window 相关知识点以及代码演示

一.了解window

在JavaScript中，window对象是浏览器的全局对象，它不仅代表了浏览器窗口，同时也充当了ECMAScript中的Global对象的角色。因此，深入了解和掌握window对象的属性和方法对于JavaScript开发者来说至关重要。
以下内容将依次介绍window对象的一些主要特性，并提供相应的代码演示。

二.控制窗口大小和位置

1.基本概念

window对象提供了对浏览器窗口尺寸和位置的控制与访问。通过window.innerWidth、window.innerHeight可以获取窗口的内部宽度和高度（即可视区域），而window.outerWidth、window.outerHeight则包含了工具栏和滚动条的外部宽度和高度。

2.代码演示

// 打印窗口的内部和外部尺寸
console.log("内部宽度： " + window.innerWidth);
console.log("内部高度： " + window.innerHeight);
console.log("外部宽度： " + window.outerWidth);
console.log("外部高度： " + window.outerHeight);

三.打开和关闭窗口

1.基本概念

使用window.open()方法可以打开一个新的浏览器窗口或标签页，而window.close()则用于关闭当前窗口或标签页。

2.代码演示

// 打开一个新的窗口
var newWindow = window.open("https://www.example.com");// 关闭当前窗口
window.close();

四.定时器函数

1.基本概念

**setTimeout()和setInterval()方法允许在指定的时间后或者周期性地执行某段代码。同时，可以使用clearTimeout()和clearInterval()**来取消延迟执行或周期性执行的代码。

2.代码演示

// 设置一个5秒后执行的定时器
var timeoutId = setTimeout(function() {console.log("5秒后执行");
}, 5000);// 设置一个每2秒重复执行的定时器
var intervalId = setInterval(function() {console.log("每2秒执行一次");
}, 2000);// 清除定时器
clearTimeout(timeoutId);
clearInterval(intervalId);

五.弹出对话框

1.基本概念

window.alert()、**window.confirm()和window.prompt()**方法分别用于显示警告框、确认框和提示框。这些对话框可以用于与用户交互，例如获取输入或通知信息。

2.代码演示

// 显示警告框
window.alert("这是一个警告框");// 显示确认框
var result = window.confirm("请确认操作");
console.log("用户选择： " + (result ? "确定" : "取消"));// 显示提示框并获取输入
var name = window.prompt("请输入您的名字", "知数SEO");
console.log("用户输入： " + name);

六.获取和设置窗口URL

1.基本概念

window.location属性提供了当前页面的URL信息，并且可以用来改变当前页面的URL。

2.代码演示

// 获取当前页面的URL
console.log("当前页面的URL: " + window.location.href);// 更改当前页面的URL（假设在同一域名下）
window.location.href = "newpage.html";

七.历史记录

1.基本概念

window.history对象提供了对浏览器会话历史的访问，允许无刷新地浏览网页。

2.代码演示

// 后退
window.history.back();// 前进
window.history.forward();// 跳转到历史记录的第3个记录页
window.history.go(3);