jQuery如何根据网页来源显示不同内容？-网页设计-锦华智联科技

下面我将为你提供一个详细的、可立即使用的解决方案，包括代码、解释和几种常见的场景示例。

核心原理

这个功能的实现主要依赖于 JavaScript 的 document.referrer 属性。

document.referrer: 它是一个只读属性，包含了当前页面是如何被加载的来源 URL。
- 如果用户直接在地址栏输入网址或通过书签访问,document.referrer 的值是空字符串 ()。
- 如果用户通过搜索引擎、社交媒体链接、其他网站链接跳转过来，document.referrer 就会记录那个来源网址。

我们的 jQuery 代码会检查这个 document.referrer 的值，然后根据其内容，决定显示哪个 HTML 元素或执行哪个函数。

完整代码示例（可直接复制使用）

这是一个完整的 HTML 文件，包含了所有必要的 jQuery 代码和样式，你可以直接保存为 .html 文件，然后在浏览器中打开测试。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">根据来源显示不同内容</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #0056b3;
        }
        .content-box {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 20px;
        }
        /* 为不同来源的盒子设置不同的样式，方便区分 */
        .from-google { border-left: 5px solid #4285F4; background-color: #e8f0fe; }
        .from-facebook { border-left: 5px solid #1877f2; background-color: #e7f3ff; }
        .from-twitter { border-left: 5px solid #1DA1F2; background-color: #e6f7ff; }
        .default { border-left: 5px solid #6c757d; background-color: #f8f9fa; }
        /* 默认隐藏所有特定内容的盒子 */
        .specific-content {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎访问我们的网站！</h1>
        <p>您正在查看一个可以根据您从哪里来而显示不同内容的页面。</p>
        <!-- 默认显示的内容 -->
        <div id="default-content" class="content-box default">
            <h2>通用欢迎信息</h2>
            <p>无论您从哪里来，我们都欢迎您的光临！如果您是第一次访问，可以浏览我们的<a href="#">新手指南</a>。</p>
        </div>
        <!-- 来自 Google 的特定内容 -->
        <div id="google-content" class="content-box specific-content from-google">
            <h2>嘿，Google 的朋友！</h2>
            <p>感谢您通过 Google 找到我们！我们正在为搜索“[你的关键词]”的用户提供一份特别优惠：<strong>首单 9 折优惠</strong>！</p>
            <p>优惠码: <strong>GOOGLE10</strong></p>
        </div>
        <!-- 来自 Facebook 的特定内容 -->
        <div id="facebook-content" class="content-box specific-content from-facebook">
            <h2>你好，Facebook 用户！</h2>
            <p>欢迎！我们是您的朋友推荐来的，为了感谢您的关注，请领取我们的 <strong>免费电子书</strong>《如何提升效率》。</p>
            <p>点击这里：<a href="#">立即下载</a></p>
        </div>
        <!-- 来自 Twitter 的特定内容 -->
        <div id="twitter-content" class="content-box specific-content from-twitter">
            <h2>欢迎，Twitter 用户！</h2>
            <p>感谢您的关注！关注我们的官方 Twitter 账号 <strong>@OurCompany</strong>，即可参与抽奖，赢取最新款产品！</p>
        </div>
    </div>
    <!-- 1. 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 2. 核心的 jQuery 代码 -->
    <script>
    $(document).ready(function() {
        // 获取来源网址
        const referrer = document.referrer;
        // 检查来源网址并显示相应内容
        if (referrer) {
            // 将来源 URL 转换为小写，方便匹配
            const referrerLower = referrer.toLowerCase();
            // --- 场景匹配 ---
            // 1. 检查是否来自 Google (包括 google.com, google.co.uk 等)
            if (referrerLower.includes('google.com')) {
                // 隐藏默认内容
                $('#default-content').hide();
                // 显示 Google 特定内容
                $('#google-content').fadeIn(500); // 使用淡入效果
            // 2. 检查是否来自 Facebook
            } else if (referrerLower.includes('facebook.com') || referrerLower.includes('fb.com')) {
                $('#default-content').hide();
                $('#facebook-content').fadeIn(500);
            // 3. 检查是否来自 Twitter
            } else if (referrerLower.includes('twitter.com') || referrerLower.includes('x.com')) {
                $('#default-content').hide();
                $('#twitter-content').fadeIn(500);
            // 4. 检查是否来自某个特定的合作伙伴网站
            } else if (referrerLower.includes('partner-site.com')) {
                $('#default-content').hide();
                // 假设有一个 partner-content 的盒子
                $('#partner-content').fadeIn(500);
            // 5. 其他任何来源
            } else {
                // 如果来源不是我们关心的，可以保持默认显示，或者显示一个“其他来源”的内容
                // $('#default-content').hide();
                // $('#other-source-content').fadeIn(500);
                // 在这个例子里，我们保持默认显示
            }
        } else {
            // referrer 为空（直接访问或通过书签）
            console.log("用户直接访问或通过书签访问。");
            // 这里可以保持默认显示，或者显示一个针对直接访问者的内容
            // $('#default-content').hide();
            // $('#direct-content').fadeIn(500);
        }
    });
    </script>
</body>
</html>

代码分步解析

HTML 结构
- 我们有一个默认的 div (#default-content)，它总是存在。
- 为每个来源（Google, Facebook 等）创建一个 div，并给它们一个共同的类 specific-content 和一个唯一的 ID (如 #google-content)。
- 在 CSS 中，我们将 .specific-content 的 display 设置为 none，这样它们在页面加载时是隐藏的。
jQuery 代码
- $(document).ready(function() { ... });: 这确保了代码在整个 HTML 文档加载完毕后才执行，这是最佳实践。
- const referrer = document.referrer;: 获取来源网址。
- if (referrer) { ... } else { ... }: 判断 referrer 是否为空。
  - if 分支 (来源不为空): 用户是从其他地方跳转来的。
    - referrerLower.includes('google.com'): 这是核心的判断逻辑，我们使用 toLowerCase() 和 includes() 方法来检查来源 URL 中是否包含我们关心的字符串，这样做的好处是，无论用户访问的是 google.com 还是 www.google.com，都能被匹配到。
    - $('#default-content').hide();: 隐藏默认内容。
    - $('#google-content').fadeIn(500);: 找到对应 ID 的元素，并使用 fadeIn() 动画效果让它显示出来。500 是动画的持续时间（毫秒）。
  - else 分支 (来源为空): 用户是直接访问的，你可以在这里添加针对直接访问用户的逻辑。

高级用法与注意事项

使用 URLSearchParams 获取引荐来源中的特定参数

有时,你可能需要更精确的匹配，比如只匹配