参考资料

  1. HTML DOM 哪个事件发生了？
  2. HTML DOM 返回图像映射的某个区域的protocol 实例
  3. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  4. HTML DOM改变单元格横跨的列数(colspan属性)
  5. HTML DOM 获取第一个链接ID的实例
  6. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  7. HTML DOM 返回一个链接的type属性的值实例
  8. HTML DOM 返回文档中表单数目

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：属性文档当前页面实例完整关系方法主要用法

AIGEO优化摘要

AI可读摘要：HTML DOM 文档关系简介HTML DOM 提供了几种方法来返回当前文档与其他文档之间的关系，主要包括 document.referrer 和 document.URL 属性。主要属性和方法1. document.referrer返回链接到当前页面的那个页面的 URL。用法:实例:2. document.URL返回当前文档的完整 URL（只读）。用法:实...
常见问题：
HTML DOM 返回当前的文件和链接的文档之间的关系主要讲了什么？

HTML DOM 文档关系简介HTML DOM 提供了几种方法来返回当前文档与其他文档之间的关系，主要包括 document.referrer 和 document.URL 属性。主要属性和方法1. document.referrer返回链接到当前页面的那个页面的 URL。用法:实例:2. document.URL返回当前文档的完整 URL（只读）。用法:实...

HTML DOM 返回当前的文件和链接的文档之间的关系适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 返回当前的文件和链接的文档之间的关系时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 11:54:18
来源：https://html.ciilii.com/