参考资料

  1. HTML DOM 哪个事件发生了？
  2. HTML DOM 根节点
  3. HTML DOM 改变image的src
  4. HTML DOM 方法
  5. HTML DOM获得下拉列表的选项数量
  6. HTML DOM 对iframe排版
  7. HTML DOM 属性
  8. HTML DOM 提交表单

HTML DOM 文档关系

简介

HTML DOM 提供了几种方法来返回当前文档与其他文档之间的关系，主要包括 document.referrer 和 document.URL 属性。

主要属性和方法

1. document.referrer

返回链接到当前页面的那个页面的 URL。

用法:

let referringPage = document.referrer;

实例:

if (document.referrer) {
    console.log("用户来自: " + document.referrer);
} else {
    console.log("用户直接访问本页面或来源被隐藏");
}

2. document.URL

返回当前文档的完整 URL（只读）。

用法:

let currentUrl = document.URL;

实例:

console.log("当前页面URL是: " + document.URL);

功能说明

  • document.referrer 常用于分析流量来源

  • document.URL 用于获取当前页面完整地址

  • 这些属性都是只读的，不能直接修改

CSS 扩展

虽然 CSS 不能直接访问这些 DOM 属性，但可以通过 CSS 属性选择器结合 HTML 数据属性来模拟类似功能：

<!-- 通过JavaScript设置数据属性 -->
<body data-referrer="https://example.com">
/* 根据referrer来源应用不同样式 */
body[data-referrer*="google.com"] {
    background-color: #f0f0f0;
}

body[data-referrer*="example.com"] {
    background-color: #e0e0e0;
}

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>文档关系示例</title>
    <style>
        #info {
            padding: 20px;
            margin: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div id="info"></div>
    
    <script>
        let infoDiv = document.getElementById('info');
        
        // 显示当前URL
        infoDiv.innerHTML += "<p><strong>当前URL:</strong> " + document.URL + "</p>";
        
        // 显示referrer
        if (document.referrer) {
            infoDiv.innerHTML += "<p><strong>来源页面:</strong> " + document.referrer + "</p>";
        } else {
            infoDiv.innerHTML += "<p><strong>来源:</strong> 直接访问或来源被隐藏</p>";
        }
    </script>
</body>
</html>
TAG：属性文档当前页面实例完整关系方法主要用法