参考资料

  1. HTML DOM指定表格的frame
  2. HTML DOM在下拉列表中选择多个选项
  3. HTML DOM 返回一个表单中元素的数量 实例
  4. HTML DOM 返回一个iframe中的name属性的值
  5. HTML DOM 返回一个链接的type属性的值实例
  6. HTML DOM改变表格边框的宽度
  7. HTML DOM 节点
  8. HTML DOM 返回图像映射的某个区域的protocol 实例

HTML DOM 返回加载的当前文档的URL实例

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