参考资料

  1. HTML DOM 返回和设置链接的hreflang属性实例
  2. HTML DOM document.write() 方法
  3. HTML DOM 当点击完button不可用 实例
  4. HTML DOM 返回一个表单中所有元素的value 实例
  5. HTML DOM改变单元格横跨的列数(colspan属性)
  6. HTML DOM 返回图像映射的某个区域的protocol 实例
  7. HTML DOM 返回一个区域的href属性的锚部分实例
  8. HTML DOM 打开输出流，向流中输入文本实例

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：属性完整当前文档主机名路径功能字符串形式基本