js获取当前页面(js获取当前页面的地址)

## JavaScript 获取当前页面### 简介在 JavaScript 中,我们可以使用多种方法来获取当前页面的相关信息,例如页面 URL、标题、路径等。这些信息在网页开发中非常有用,例如在动态更新页面内容、进行页面跳转或记录用户行为等场景。### 获取页面 URL#### 1. `window.location.href` 属性`window.location.href` 属性返回当前页面的完整 URL 地址,包括协议、主机名、路径和查询参数。```javascript const currentUrl = window.location.href; console.log(currentUrl); // 输出当前页面的完整 URL 地址 ```#### 2. `document.URL` 属性`document.URL` 属性与 `window.location.href` 属性功能相同,也返回当前页面的完整 URL 地址。```javascript const currentUrl = document.URL; console.log(currentUrl); // 输出当前页面的完整 URL 地址 ```### 获取页面标题#### 1. `document.title` 属性`document.title` 属性返回当前页面的标题。```javascript const title = document.title; console.log(title); // 输出当前页面的标题 ```### 获取页面路径#### 1. `window.location.pathname` 属性`window.location.pathname` 属性返回当前页面路径,不包括协议、主机名和查询参数。```javascript const pathname = window.location.pathname; console.log(pathname); // 输出当前页面的路径 ```#### 2. `window.location.origin` 属性`window.location.origin` 属性返回当前页面的协议、主机名和端口号。```javascript const origin = window.location.origin; console.log(origin); // 输出当前页面的协议、主机名和端口号 ```### 获取查询参数#### 1. `window.location.search` 属性`window.location.search` 属性返回当前页面的查询参数部分,包括问号(?)及后面的内容。```javascript const search = window.location.search; console.log(search); // 输出当前页面的查询参数部分 ```#### 2. 解析查询参数可以使用第三方库(如 `URLSearchParams` 或 `qs`)来解析查询参数。```javascript const searchParams = new URLSearchParams(window.location.search); const paramValue = searchParams.get('paramName'); console.log(paramValue); // 输出查询参数 `paramName` 的值 ```### 获取页面元素#### 1. `document.getElementById()` 方法`document.getElementById()` 方法通过元素 ID 获取页面元素。```javascript const element = document.getElementById('elementId'); console.log(element); // 输出对应 ID 的页面元素 ```#### 2. `document.querySelector()` 方法`document.querySelector()` 方法通过 CSS 选择器获取页面元素。```javascript const element = document.querySelector('.className'); console.log(element); // 输出对应 class 的第一个页面元素 ```### 其他信息除了以上基本信息外,还可以获取其他页面信息,例如:

页面语言:`document.documentElement.lang`

页面编码:`document.characterSet`### 总结本文介绍了 JavaScript 中获取当前页面信息的常用方法,这些方法在网页开发中非常实用。开发者可以根据实际需求选择合适的方案来获取所需信息。

JavaScript 获取当前页面

简介在 JavaScript 中,我们可以使用多种方法来获取当前页面的相关信息,例如页面 URL、标题、路径等。这些信息在网页开发中非常有用,例如在动态更新页面内容、进行页面跳转或记录用户行为等场景。

获取页面 URL

1. `window.location.href` 属性`window.location.href` 属性返回当前页面的完整 URL 地址,包括协议、主机名、路径和查询参数。```javascript const currentUrl = window.location.href; console.log(currentUrl); // 输出当前页面的完整 URL 地址 ```

2. `document.URL` 属性`document.URL` 属性与 `window.location.href` 属性功能相同,也返回当前页面的完整 URL 地址。```javascript const currentUrl = document.URL; console.log(currentUrl); // 输出当前页面的完整 URL 地址 ```

获取页面标题

1. `document.title` 属性`document.title` 属性返回当前页面的标题。```javascript const title = document.title; console.log(title); // 输出当前页面的标题 ```

获取页面路径

1. `window.location.pathname` 属性`window.location.pathname` 属性返回当前页面路径,不包括协议、主机名和查询参数。```javascript const pathname = window.location.pathname; console.log(pathname); // 输出当前页面的路径 ```

2. `window.location.origin` 属性`window.location.origin` 属性返回当前页面的协议、主机名和端口号。```javascript const origin = window.location.origin; console.log(origin); // 输出当前页面的协议、主机名和端口号 ```

获取查询参数

1. `window.location.search` 属性`window.location.search` 属性返回当前页面的查询参数部分,包括问号(?)及后面的内容。```javascript const search = window.location.search; console.log(search); // 输出当前页面的查询参数部分 ```

2. 解析查询参数可以使用第三方库(如 `URLSearchParams` 或 `qs`)来解析查询参数。```javascript const searchParams = new URLSearchParams(window.location.search); const paramValue = searchParams.get('paramName'); console.log(paramValue); // 输出查询参数 `paramName` 的值 ```

获取页面元素

1. `document.getElementById()` 方法`document.getElementById()` 方法通过元素 ID 获取页面元素。```javascript const element = document.getElementById('elementId'); console.log(element); // 输出对应 ID 的页面元素 ```

2. `document.querySelector()` 方法`document.querySelector()` 方法通过 CSS 选择器获取页面元素。```javascript const element = document.querySelector('.className'); console.log(element); // 输出对应 class 的第一个页面元素 ```

其他信息除了以上基本信息外,还可以获取其他页面信息,例如:* 页面语言:`document.documentElement.lang` * 页面编码:`document.characterSet`

总结本文介绍了 JavaScript 中获取当前页面信息的常用方法,这些方法在网页开发中非常实用。开发者可以根据实际需求选择合适的方案来获取所需信息。

标签列表