参考资料

  1. HTML DOM 获取第一个链接ID的实例
  2. HTML DOM 返回图像映射的某个区域的pathname 实例
  3. HTML DOM 哪个鼠标键被点击了？
  4. HTML DOM为表格创建一个标题
  5. HTML DOM 返回文档中的链接数
  6. HTML DOM单元格内容水平对齐
  7. HTML DOM 返回一个iframe中的marginwidth属性的值
  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：属性文档当前页面实例完整关系方法主要用法

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