参考资料

1. HTML DOM 返回当前的文件和链接的文档之间的关系
2. HTML DOM 创建一个链接指向一个低分辨率的image
3. HTML DOM弹出下拉列表中所有选项
4. HTML DOM 对image排版
5. HTML DOM为表格创建一个标题
6. HTML DOM 返回表单中的enctype属性的值
7. HTML DOM 用指定的Name弹出元素的数量实例
8. HTML DOM删除表格中的行

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 等服务器端环境不可用

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。