如何通过JavaScript提取跳转源域名并输出到HTML字段

可行性说明 #

可以实现该需求，核心依赖浏览器原生的document.referrer属性，该属性会返回用户跳转至当前页面前的上一个访问地址。只要你的多个跳转域名（example.com、example.org、example.net）跳转至example.dev时没有配置禁止发送Referrer的规则，就可以正常提取到原始访问域名，无需额外配置URL参数。

使用限制 #

• 如果跳转域名配置了Referrer-Policy: no-referrer响应头，或者跳转链接添加了rel="noreferrer"属性，会导致document.referrer为空，无法提取来源
• 如果用户直接在地址栏输入example.dev访问，而非通过你的跳转域名跳转，也会拿到空值，可自行配置默认值处理

完整实现代码 #

JS逻辑（兼容你之前使用的jQuery语法） #

// 提取跳转来源域名
function getOriginDomain() {
    const referrerUrl = document.referrer;
    // 无来源时返回默认值，可按需修改
    if (!referrerUrl) return '未知来源';
    // 解析URL提取域名
    try {
        const parsedUrl = new URL(referrerUrl);
        return parsedUrl.hostname;
    } catch (err) {
        return '未知来源';
    }
}

$(document).ready(function () {
    const originDomain = getOriginDomain();
    // 输出到HTML文本节点示例
    $('#originDomainText').text(originDomain);
    // 输出到HTML属性/表单字段示例
    $('#originDomainInput').val(originDomain);

    // 按不同来源展示对应内容，可按需扩展规则
    switch (originDomain) {
        case 'example.com':
            $('#exampleComBlock').show();
            break;
        case 'example.org':
            $('#exampleOrgBlock').show();
            break;
        case 'example.net':
            $('#exampleNetBlock').show();
            break;
        default:
            $('#defaultBlock').show();
    }
});

HTML结构示例 #

<!-- 展示来源域名的文本字段 -->
<p>访问来源：<span id="originDomainText"></span></p>
<!-- 存储来源域名的隐藏表单域，可用于后续提交 -->
<input type="hidden" id="originDomainInput" name="origin_domain">

<!-- 不同来源的专属展示内容，默认隐藏 -->
<div id="exampleComBlock" style="display: none;">欢迎来自example.com的用户</div>
<div id="exampleOrgBlock" style="display: none;">欢迎来自example.org的用户</div>
<div id="exampleNetBlock" style="display: none;">欢迎来自example.net的用户</div>
<div id="defaultBlock" style="display: none;">欢迎访问本站</div>

内容的提问来源于stack exchange，提问作者genuine