参考资料

  1. HTML DOM 返回加载的当前文档的URL实例
  2. HTML DOM 返回一个区域的href属性的querystring部分 实例
  3. HTML DOM 被按下的键盘键的keycode？
  4. HTML DOM 事件
  5. HTML DOM 返回图像映射的某个区域的target的值 实例
  6. HTML DOM 获取第一个链接ID的实例
  7. HTML DOM为表格指定规则
  8. HTML DOM document.write() 方法

HTML DOM 返回当前文档URL

功能说明

document.URL 属性返回当前加载文档的完整URL（字符串形式）。

基本用法

var currentURL = document.URL;

实例

<!DOCTYPE html>
<html>
<head>
    <title>URL示例</title>
    <style>
        #urlDisplay {
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>当前页面URL</h1>
    <div id="urlDisplay"></div>
    
    <script>
        document.getElementById('urlDisplay').textContent = document.URL;
    </script>
</body>
</html>

相关属性比较

  • window.location.href：与 document.URL 相同，返回完整URL

  • window.location.host：返回主机名和端口号

  • window.location.pathname：返回路径部分

CSS扩展

可以为URL显示区域添加样式：

.url-container {
    font-family: monospace;
    color: #0066cc;
    background-color: #f8f8f8;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #0066cc;
    word-break: break-all;
}

.url-container:hover {
    background-color: #e8f4ff;
    transition: background-color 0.3s ease;
}

注意事项

  • document.URL 是只读属性，不能通过它修改URL

  • 要修改URL应使用 window.location.href

  • 该属性始终返回完整URL，包括协议、主机名、路径等

TAG：属性完整当前文档主机名路径功能字符串形式基本

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