基于引用的图像交换

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

Facebook推荐人是例外，而不是规则，对吧？因此，我会考虑交换这两个条件块，以便else是通常情况下发生的情况，而不是让else用于异常情况。您还应该只针对引荐来源网址的主机名部分运行test，您可以通过将 URL 解析为URL对象来获取。此外，您的条件之一src设置为img1而不是img1.jpg，正如cngodles所指出的那样。这似乎是一个疏忽，所以让我们假设你的意思是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标头，这意味着引荐来源网址可能被欺骗。在很多情况下，它也可能是空的，包括当浏览器配置为不发送 Referrer 标头作为额外的隐私措施时。例如，如果您单击我上面提供的URL链接，并在该页面上尝试console.log(document.referrer)，它将是一个空字符串，因为 SO 会自动在答案中提供的链接上设置属性rel="nofollow noreferrer"。

这就是说，如果您想为某些请求提供安全或机密的东西，使用 document.referrer 并不是这样做的好方法。但是，如果您只是想要一种不同的用户体验，可以提供给非Facebook推荐人，而不是您的想法，那么这是一个非常好的方法。

Answer 2

示例中的源代码显示img1设置为src，可能需要是img1.jpg或任何正确的文件名。