HTML DOM 返回文档的完整的URL实例

HTML DOM 返回完整 URL 实例

简介

HTML DOM 提供了多种方法来获取当前文档的完整 URL，最常用的是 window.location.href 属性。

主要属性和方法

1. window.location.href

返回完整的 URL 字符串

var fullUrl = window.location.href;

2. document.URL

返回文档的完整 URL（与 window.location.href 类似）

var docUrl = document.URL;

3. window.location 对象的其他属性

• protocol: 返回协议部分（如 http: 或 https:）

• host: 返回主机名和端口号

• hostname: 返回主机名

• port: 返回端口号

• pathname: 返回路径部分

• search: 返回查询字符串部分

• hash: 返回锚点部分

实例

获取完整 URL

// 获取当前页面的完整URL
var currentUrl = window.location.href;
console.log("当前URL: " + currentUrl);

分解 URL 各部分

console.log("协议: " + window.location.protocol);
console.log("主机: " + window.location.host);
console.log("路径: " + window.location.pathname);
console.log("查询字符串: " + window.location.search);
console.log("锚点: " + window.location.hash);

动态修改页面 URL

// 修改当前页面的URL（会重定向页面）
window.location.href = "https://www.example.com/newpage.html";

CSS 扩展

虽然 CSS 不能直接获取 URL，但可以使用属性选择器基于 URL 应用样式：

/* 当链接指向当前页面时应用特殊样式 */
a[href=""] {
    color: red;
    font-weight: bold;
}

/* 基于URL中的锚点应用样式 */
section:target {
    background-color: yellow;
}

注意事项

1. window.location.href 和 document.URL 在大多数情况下返回相同值

2. 修改 window.location.href 会导致页面重定向

3. 这些属性在浏览器环境中可用，Node.js 等服务器端环境不可用