location.href 和 document.URL 与 document.documentURI

kfepiza

已于 2025-02-05 07:54:39 修改

阅读量1.9k

点赞数

于 2023-06-10 15:25:20 首次发布

本文链接：https://blog.csdn.net/kfepiza/article/details/131141670

版权

HTML CSS JS 同时被 2 个专栏收录

85 篇文章

订阅专栏

Js JavaScript ECMAScript

49 篇文章

订阅专栏

location.href 和 document.URL 与 document.documentURI

相同点

获取到的值相同
在这里插入图片描述

不同点

location.href=url可以赋值, 效果类似location.assign(url) , 可以后退
document.URL 与 document.documentURI 是只读的, 赋值无效

location.href

在这里插入图片描述

location===window.location
true
location===document.location
true
location===window.document.location
true

MDN说: Location 接口的 href 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 USVString 值，且允许 href 的更新。

document.URL

document.URL 返回当前文档的 URL 地址

该属性的值和DOM Level 0 中的document.location.href 属性的值是相等的。然而 document.location.href 是可写的，document.URL 是只读的。

document.documentURI 也返回与该属性相同的值，不过它在非 HTML 文档中也可以使用。

规范 : DOM Level 2 HTML: URL
[URI [IETF RFC 2396] ] (https://www.w3.org/TR/DOM-Level-2-HTML/references.html#RFC2396)

document.documentURI

Document 接口的属性 documentURI 以字符串的形式返回文档的位置（location）。在最初的 DOM3 定义中，这个属性是可读/写的。在现代的 DOM 标准（DOM4）中，它是只读的。
HTML 文档有一个 document.URL 属性返回同样的值。但是不像 URL，documentURI 适用于所有类型的文档。

document.URL与document.documentURI

document.URL

document.URL 返回当前文档的 URL 地址

该属性的值和DOM Level 0 中的document.location.href 属性的值是相等的。然而 document.location.href 是可写的，document.URL 是只读的。

document.documentURI 也返回与该属性相同的值，不过它在非 HTML 文档中也可以使用。

规范 : DOM Level 2 HTML: URL
[URI [IETF RFC 2396] ] (https://www.w3.org/TR/DOM-Level-2-HTML/references.html#RFC2396)

document.documentURI

相同点

返回值相同
都是只读,不可写, 赋值无效

不同点

- document.documentURI 继承自Document接口, 适用于所有文档;
- document.URL 继承自HTMLDocument接口, 只适用于HTML文档;

对比 document.URL 和 location.href

document.URL 和 location.href 的不同点

document.URL只读 , location.href读写

给 document.URL 赋值, document.URL的值不会改变
在这里插入图片描述
给 location.href 赋值, location.href 的值改变了, 并且页面也改变了, 效果和 location.assign()一样, 可以"后退"

因为页面改变了,控制台内容也清空了, 所以没法截图

localtion.href=url 相当于 location.assign(url)

document.URL 属于比较老的 api, 作为代替应该尽量使用 window.location.href 而非 document.URL. ?

document.URL 和 location.href 的相同点

值相等

MDN上说 document.URL属性的值和DOM Level 0 中的document.location.href 属性的值是相等的。然而 document.location.href 是可写的，document.URL 是只读的。

都能完整显示url

浏览器地址栏输入 https://cn.bing.com/#aaa?a=a&b=b&c=c
在这里插入图片描述
浏览器地址栏输入 about:blank#aaa?n=n100&a=1&b=2&c=3&d=4&e=5

在 JavaScript 中，location.href、document.URL 和 document.documentURI 都用于获取当前页面的 URL，但它们的行为和用途存在细微差异。以下是详细对比：

1. `location.href`

所属对象：window.location（可简写为 location）。
功能：
- 读取：返回当前页面的完整 URL（包含协议、域名、路径、查询参数、哈希等）。
- 写入：修改后会触发页面跳转（同 location.assign()）。
特点：
- 动态更新：如果 URL 被修改（如通过 history.pushState 或哈希变化），location.href 会反映最新值。
- 包含哈希（Hash）：返回的 URL 包含 # 后的内容。
- 可写性：可直接赋值以导航到新页面。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(location.href); 
// 输出: "https://example.com/path?q=test#section1"

// 写入新 URL（跳转页面）
location.href = "https://example.com/new-page";

2. `document.URL`

所属对象：document。
功能：
- 只读：返回当前文档的完整 URL，与 location.href 值相同。
- 不可写入：尝试赋值会静默失败（严格模式下报错）。
特点：
- 静态性：在某些旧浏览器中可能不会动态更新（如哈希变化时）。
- 标准规范：根据 DOM 规范，document.URL 应始终与 location.href 同步。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(document.URL); 
// 输出: "https://example.com/path?q=test#section1"

// 尝试写入无效
document.URL = "https://example.com/new-page"; // 无效果

3. `document.documentURI`

所属对象：document。
功能：
- 只读：返回文档的 URL，通常与 document.URL 值相同。
- 规范定义：来自 DOM 规范，最初用于 XML 文档，但 HTML 文档也支持。
特点：
- 兼容性：现代浏览器中与 document.URL 行为一致，但某些旧环境可能有差异。
- 语义性：更适用于通用文档模型（如 XML）。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(document.documentURI); 
// 输出: "https://example.com/path?q=test#section1"

核心对比表

特性	`location.href`	`document.URL`	`document.documentURI`
所属对象	`window.location`	`document`	`document`
可写性	是（触发跳转）	否	否
动态更新	是（实时反映 URL 变化）	是（现代浏览器）	是（现代浏览器）
哈希（Hash）包含	是	是	是
主要用途	获取或跳转到 URL	只读获取 URL	只读获取 URL（通用文档模型）
兼容性	所有浏览器	所有浏览器	现代浏览器（IE9+）

实际场景示例

1. 获取当前 URL（推荐用 `location.href`）

// 获取当前完整 URL
const currentURL = location.href;
console.log(currentURL); // "https://example.com/path?q=test#section1"

2. 监听哈希变化

window.addEventListener("hashchange", () => {
  console.log("新哈希值:", location.hash); // "#section2"
  console.log("当前 URL:", location.href); // 包含最新哈希
});

3. 单页应用（SPA）中更新 URL

// 使用 history.pushState 更新 URL 不刷新页面
history.pushState({}, "", "/new-path#section2");
console.log(location.href); // 立即更新为 "/new-path#section2"
console.log(document.URL);  // 同步更新（现代浏览器）

注意事项

写入能力：
- 只有 location.href 可赋值并触发跳转。
- document.URL 和 document.documentURI 是只读的。
跨浏览器一致性：
- 在旧版 IE 中，document.URL 可能在哈希变化时未更新，而 location.href 更可靠。
编码差异：
- 三者返回的 URL 均已解码（如空格显示为空格，而非 %20）。
性能：
- 无显著差异，优先使用 location.href（语义更明确）。

总结

优先使用 location.href：因其可写且动态更新，适合大多数场景。
需要只读时：document.URL 和 document.documentURI 等效，但前者更常见。
兼容旧浏览器：若需支持 IE8 等，优先用 location.href。

根据需求选择合适的属性，可确保代码清晰且兼容性强。

location.href、document.URL与document.documentURI都是用于获取当前文档URL的属性，但它们之间存在一些差异。以下是对这三个属性的详细对比：

一、相同点

返回值：在大多数情况下，这三个属性返回的值是相同的，都表示当前文档的完整URL。

二、不同点

可读写性：
- location.href：可读可写。对其赋值可以改变当前页面的URL，并导航到新的页面，类似于调用location.assign(url)方法。赋值后，浏览器的历史记录会更新，允许用户通过点击“后退”按钮返回到之前的页面。
- document.URL：只读。尝试对其赋值不会改变当前页面的URL。它继承自HTMLDocument接口，因此只适用于HTML文档。
- document.documentURI：只读。同样地，尝试对其赋值也不会改变当前页面的URL。但它继承自Document接口，因此适用于所有类型的文档，包括非HTML文档。
适用范围：
- document.URL：特定于HTML文档。虽然它在非HTML文档中可能仍然存在，但根据规范，它主要用于HTML文档。
- document.documentURI：更通用。它适用于所有类型的文档，包括HTML、XML等。
接口与标准：
- location.href：是Location接口的一部分，该接口提供了与当前文档位置（URL）相关的各种方法和属性。
- document.URL 和 document.documentURI：都是Document接口的属性。在DOM标准的演变过程中，这两个属性从最初的可读/写变为了只读（在DOM4及更高版本中）。
使用建议：
- 由于document.URL是只读的，并且特定于HTML文档，因此在需要修改URL或处理非HTML文档时，它可能不是最佳选择。
- document.documentURI虽然也是只读的，但它提供了更广泛的适用性，可以用于所有类型的文档。
- location.href提供了读写能力，是修改当前页面URL的首选方法。但请注意，修改URL会导致页面导航，可能会影响用户的浏览体验。

综上所述，这三个属性在获取当前文档URL方面具有相同的功能，但在可读写性、适用范围和使用建议方面存在差异。在选择使用哪个属性时，应根据具体需求和应用场景进行权衡。

在JavaScript中，location.href、document.URL 和 document.documentURI 都可以用来获取当前页面的URL地址，但它们之间存在一些细微的差异和特定的使用场景。

location.href

定义与用法：location.href 是 Location 对象的一个属性，它既可以读取也可以写入。当你读取它时，会返回当前页面的完整URL。当你给它赋值时，浏览器会导航到新的URL。
特点：
- 可读可写，因此可以用它来实现页面跳转。
- 当你为 location.href 赋新值时，页面将重新加载并指向新的URL，类似于用户点击了一个链接或在地址栏输入了新的URL 。

document.URL

定义与用法：document.URL 是一个只读属性，用于返回当前文档的URL地址。它的值等同于 document.location.href 属性的值。
特点：
- 只能读取，不能修改。
- 它是HTML文档特有的属性，不适用于非HTML文档类型。

document.documentURI

定义与用法：document.documentURI 同样是一个只读属性，它返回文档的位置（location）。这个属性最初在DOM3标准中是可以读写的，但在现代DOM标准（DOM4）中它是只读的。
特点：
- 适用于所有类型的文档，而不仅仅是HTML文档。
- 与 document.URL 类似，也是只读的。

比较

相同点：
- 这三个属性都可以用来获取当前页面的URL地址，并且它们的返回值通常是相同的。
不同点：
- location.href 是唯一一个允许设置新值以改变当前页面URL的属性 ,。
- document.URL 和 document.documentURI 都是只读的，但 document.documentURI 更通用，因为它也适用于非HTML文档 ,。
- 在处理带有片段标识符（fragment identifier）的URL时，location.href 包含片段标识符，而 document.URL 可能不会显示这部分信息，这取决于具体的行为。

综上所述，如果你需要改变当前页面的URL或者执行页面跳转操作，你应该使用 location.href。对于简单的获取当前页面的URL地址的需求，你可以选择 document.URL 或者 document.documentURI，根据你的文档类型和是否需要跨文档类型支持来做决定。不过，在大多数情况下，推荐使用 window.location.href 来代替 document.URL，因为前者更为灵活并且是更现代的做法。

在 JavaScript 中，location.href、document.URL 和 document.documentURI 都与当前页面的 URL 相关，但它们在具体使用和一些细微特性上存在差异，下面为你详细对比：

基本功能概述

这三个属性的核心功能都是获取当前页面的完整 URL，但它们所属的对象和一些细节有所不同。

详细对比

1. `location.href`

所属对象：location 是 window 对象的一个属性，它代表当前窗口的地址栏信息，包含了许多与 URL 操作相关的方法和属性。
功能用途：
- 获取 URL：可以用来获取当前页面的完整 URL。
- 修改 URL：还能通过赋值操作来改变当前页面的 URL，从而实现页面跳转。
示例代码：

// 获取当前页面的 URL
const currentUrl = location.href;
console.log(currentUrl);

// 跳转到新的页面
location.href = 'https://www.example.com';

2. `document.URL`

所属对象：document 是文档对象模型（DOM）的根节点，document.URL 是 document 对象的一个只读属性。
功能用途：主要用于获取当前文档的完整 URL，不支持修改操作。
示例代码：

// 获取当前页面的 URL
const docUrl = document.URL;
console.log(docUrl);

3. `document.documentURI`

所属对象：同样属于 document 对象，它也是一个只读属性。
功能用途：获取当前文档的完整 URL，通常情况下与 document.URL 返回相同的值。不过，在一些特定的 XML 文档或者 XHTML 文档中，它可能会返回不同的结果，因为 document.documentURI 更侧重于表示文档的原始 URI。
示例代码：

// 获取当前页面的 URL
const docUri = document.documentURI;
console.log(docUri);

差异总结

可写性：
- location.href 是可写的，可以通过赋值实现页面跳转。
- document.URL 和 document.documentURI 是只读属性，不能通过赋值来改变当前页面的 URL。
使用场景：
- 如果你需要获取当前页面的 URL 并可能要进行页面跳转操作，使用 location.href。
- 若仅需要获取当前文档的 URL，不涉及修改操作，document.URL 和 document.documentURI 都可以使用，大多数情况下二者返回值相同，但在特殊文档格式中可能有差异。

综上所述，在实际开发中，应根据具体需求选择合适的属性来处理 URL 相关操作。

location.href、document.URL 和 document.documentURI 都可以用于获取当前文档的 URL，但它们之间有一些区别：

location.href

获取和设置：location.href 是 window.location 对象的一个属性，可以用来获取或设置当前页面的完整 URL。
兼容性：location.href 在所有现代浏览器中都有很好的支持。
特点：当设置 location.href 时，浏览器会导航到新的 URL，这会导致页面刷新。

document.URL

获取：document.URL 是一个只读属性，用于获取当前文档的完整 URL。
兼容性：document.URL 在大多数现代浏览器中都受支持，但在某些旧版本的 IE 浏览器中可能不被支持。
特点：与 location.href 不同，document.URL 不能用于设置新的 URL。

document.documentURI

获取：document.documentURI 也是一个只读属性，用于获取当前文档的完整 URL。
兼容性：document.documentURI 在所有现代浏览器中都有很好的支持，包括一些较旧的浏览器版本。
特点：document.documentURI 的行为类似于 document.URL，但它更符合标准，并且在某些情况下（如在 SVG 文档中）可能比 document.URL 更可靠。

总结

如果你需要获取或设置当前页面的 URL，推荐使用 location.href。
如果你只需要获取当前页面的 URL，并且希望代码在所有现代浏览器中都能正常工作，可以使用 document.URL 或 document.documentURI。在这两者之间，document.documentURI 更推荐使用，因为它更符合标准，并且在某些特殊情况下更可靠。

示例代码

// 获取当前页面的 URL
console.log(location.href);
console.log(document.URL);
console.log(document.documentURI);

// 设置当前页面的 URL（会导致页面刷新）
location.href = "https://www.example.com";

通过以上对比，可以根据具体需求选择合适的属性来获取或设置当前页面的 URL。

在 JavaScript 中，location.href、document.URL 和 document.documentURI 都用于获取当前页面的 URL，但它们的行为、用途和兼容性存在差异。以下是详细对比：

1. `location.href`

所属对象：window.location（可简写为 location）。
功能：
- 读取：返回当前页面的完整 URL（包含协议、路径、查询参数、哈希等）。
- 写入：修改后会触发页面跳转（等同于调用 location.assign()）。
特点：
- 动态更新：实时反映 URL 变化（如通过 history.pushState 或哈希变化）。
- 包含哈希（Hash）：返回的 URL 包含 # 后的内容。
- 可写性：可直接赋值以导航到新页面。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(location.href); // 输出: "https://example.com/path?q=test#section1"

// 写入新 URL（触发页面跳转）
location.href = "https://example.com/new-page";

2. `document.URL`

所属对象：document。
功能：
- 只读：返回当前文档的完整 URL，值与 location.href 相同。
- 不可写入：尝试赋值会静默失败（严格模式下报错）。
特点：
- 动态更新：现代浏览器中与 location.href 同步更新（如哈希变化或 history.pushState）。
- 兼容性：在旧版浏览器（如 IE8）中可能不会实时更新哈希变化。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(document.URL); // 输出: "https://example.com/path?q=test#section1"

// 尝试写入无效
document.URL = "https://example.com/new-page"; // 无效果

3. `document.documentURI`

所属对象：document。
功能：
- 只读：返回文档的 URL，通常与 document.URL 值相同。
- 设计初衷：源自 DOM 规范，最初用于 XML 文档，但 HTML 文档也支持。
特点：
- 动态更新：现代浏览器中行为与 document.URL 一致。
- 兼容性：现代浏览器支持（IE9+），旧版浏览器可能不兼容。

示例：

// 当前 URL: https://example.com/path?q=test#section1
console.log(document.documentURI); // 输出: "https://example.com/path?q=test#section1"

核心对比表

特性	`location.href`	`document.URL`	`document.documentURI`
所属对象	`window.location`	`document`	`document`
可写性	✅ 可写（触发跳转）	❌ 只读	❌ 只读
动态更新	✅ 实时更新	✅ 现代浏览器同步更新	✅ 现代浏览器同步更新
哈希（Hash）包含	✅ 包含	✅ 包含	✅ 包含
兼容性	所有浏览器	所有浏览器	现代浏览器（IE9+）
主要用途	读写 URL（导航）	只读获取 URL	只读获取 URL（通用文档模型）

实际场景示例

1. 获取当前 URL

// 推荐使用 location.href（语义明确且兼容性好）
const currentURL = location.href;
console.log(currentURL); // "https://example.com/path?q=test#section1"

2. 单页应用（SPA）中更新 URL

// 使用 history API 修改 URL（不触发页面刷新）
history.pushState({}, "", "/new-path#section2");

// location.href 实时更新
console.log(location.href); // "/new-path#section2"

// document.URL 和 document.documentURI 也会同步更新（现代浏览器）
console.log(document.URL);          // "/new-path#section2"
console.log(document.documentURI);  // "/new-path#section2"

3. 监听哈希变化

window.addEventListener("hashchange", () => {
  // 优先用 location.href 获取最新 URL
  console.log("新哈希值:", location.hash); // "#section2"
});

注意事项

编码一致性：
- 三者返回的 URL 均经过解码（如 %20 显示为空格）。
- 若需要原始编码后的 URL，需使用 encodeURI() 或 encodeURIComponent()。
旧版浏览器兼容性：
- 在 IE8 及更早版本中，document.URL 可能不会实时更新哈希变化，此时应优先使用 location.href。
语义选择：
- 读写操作：始终用 location.href。
- 只读操作：优先用 document.URL（更常见），document.documentURI 适用于通用文档模型（如 XML）。