基于引用的图像交换

Question

我发布了类似的内容，但意识到我的代码需要在 JQuery 中发布。如果推荐 URL 包含 facebook.com，我正在尝试交换图像 SRC。我正在使用的代码正在交换图像，而不管引用 URL。我是 JS 和 JQ 的超级新手，将不胜感激任何帮助。谢谢！

if (!/facebook\.com/.test(document.referrer)) {
jQuery('#staffImage img').attr('src', 
'img1');
} else{
jQuery('#staffImage img').attr('src', 'img2.jpg');
}

Answer 1

您示例中的来源显示 img1 设置为 src，可能需要 img1.jpg 或无论正确的文件名是什么。

Answer 2

facebook 推荐人是例外，不是规则，对吧？因此，我会考虑交换这两个条件块，以便 else 是在通常情况下发生的情况，而不是让 else 用于不寻常情况。您还应该只运行您的 test 与引荐来源 URL 的主机名部分相对应，您可以通过将 URL 解析为 URL [=36] =].此外，正如 cngodles 所指出的，您的条件之一是 src 设置为 img1 而不是 img1.jpg。这似乎是一个疏忽，所以我们假设您指的是 img1.jpg。把它们放在一起，重构后的代码看起来像：

try {
    var referrerHostName = new URL(document.referrer).hostname;
} catch {
    var referrerHostName = "";
}

if (/facebook\.com/.test(referrerHostName)) {
    jQuery('#staffImage img').attr('src', 'img2.jpg');
} else {
    jQuery('#staffImage img').attr('src', 'img1.jpg');
}

您还应该考虑到 document.referrer 来自 Referrer header，这意味着 Referrer 可能会被欺骗。在很多情况下，它也可能是空的，包括当浏览器配置为不发送 Referrer header 作为附加隐私措施时。例如，如果你点击我上面提供的URL link，然后在那个页面上，尝试console.log(document.referrer)，它会是一个空字符串，因为SO会自动设置属性rel="nofollow noreferrer" 在答案中提供 links。

这就是说，如果您想为某些请求提供安全或机密的内容，使用 document.referrer 并不是一个好的方法。但是，如果您只是想要一个可以提供给 non-facebook 推荐人的不同 user-experience 而不是您想要的，那么这是一个非常好的方法。

基于引用的图像交换

Image swap based on refferer

jquery

src

referrer