js如何获取当前窗口

2025-11-10 18:09:37/ 世界杯帅哥

在JavaScript中，获取当前窗口的方式主要有几种：window对象、document对象、location对象。其中，最常用的是通过window对象，这个对象代表了浏览器窗口的一个实例。下面将详细介绍如何利用这些对象来获取和操作当前窗口。

一、WINDOW对象

window对象是JavaScript中的全局对象，代表浏览器的一个实例。通过这个对象，你可以访问和操作浏览器窗口的各种属性和方法。

1.1 使用window对象获取当前窗口

window对象提供了多种方法和属性来获取当前窗口的信息。以下是一些常用的方法和属性：

// 获取窗口的宽度和高度

let width = window.innerWidth;

let height = window.innerHeight;

console.log(`Window width: ${width}, Window height: ${height}`);

// 获取当前URL

let currentUrl = window.location.href;

console.log(`Current URL: ${currentUrl}`);

1.2 操作当前窗口

通过window对象，你还可以执行一些操作，比如打开新窗口、关闭窗口、调整窗口大小等。

// 打开新窗口

let newWindow = window.open('https://www.example.com', '_blank');

// 关闭当前窗口

window.close();

// 调整窗口大小

window.resizeTo(800, 600);

二、DOCUMENT对象

document对象表示当前加载的HTML文档，通过这个对象可以访问和操作文档的内容。

2.1 获取当前文档的信息

通过document对象，你可以获取当前文档的一些基本信息，例如标题、URL等。

// 获取文档标题

let title = document.title;

console.log(`Document title: ${title}`);

// 获取文档的URL

let documentUrl = document.URL;

console.log(`Document URL: ${documentUrl}`);

2.2 操作当前文档

你还可以通过document对象来操作文档的内容，例如修改标题、添加元素等。

// 修改文档标题

document.title = 'New Title';

// 添加一个新的段落

let newParagraph = document.createElement('p');

newParagraph.textContent = 'This is a new paragraph.';

document.body.appendChild(newParagraph);

三、LOCATION对象

location对象包含了当前窗口的URL信息，可以通过这个对象来获取或操作URL。

3.1 获取当前URL信息

location对象提供了多种属性来获取URL的各部分信息。

// 获取完整的URL

let href = location.href;

console.log(`Full URL: ${href}`);

// 获取协议

let protocol = location.protocol;

console.log(`Protocol: ${protocol}`);

// 获取主机名

let hostname = location.hostname;

console.log(`Hostname: ${hostname}`);

// 获取路径

let pathname = location.pathname;

console.log(`Pathname: ${pathname}`);

3.2 操作URL

通过location对象，你还可以进行URL的重定向等操作。

// 重定向到新的URL

location.href = 'https://www.example.com';

// 重新加载当前页面

location.reload();

四、获取浏览器窗口相关信息的综合示例

下面是一个综合示例，展示了如何利用window、document和location对象来获取和操作当前窗口的信息。

// 获取窗口宽度和高度

let windowWidth = window.innerWidth;

let windowHeight = window.innerHeight;

console.log(`Window width: ${windowWidth}, Window height: ${windowHeight}`);

// 获取文档标题和URL

let documentTitle = document.title;

let documentURL = document.URL;

console.log(`Document title: ${documentTitle}, Document URL: ${documentURL}`);

// 获取完整的URL和主机名

let fullURL = location.href;

let hostName = location.hostname;

console.log(`Full URL: ${fullURL}, Hostname: ${hostName}`);

// 添加新的段落到文档

let newPara = document.createElement('p');

newPara.textContent = 'This is a dynamically added paragraph.';

document.body.appendChild(newPara);

// 重定向到新的URL

// location.href = 'https://www.example.com';

通过以上示例，你可以更好地理解如何使用JavaScript来获取和操作当前窗口的信息。如果你需要更复杂的项目管理和协作功能，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两款工具都能帮助你更高效地进行项目管理和团队协作。