javascript - 如何将 document.referrer 与两种不同的模式一起使用?
问题描述
我的网站上有两种不同的模式,一种具有要定位的特定域,另一种定位具有域的所有页面website.com
。两个模态都针对 ,document.referrer
并且每个模态都有不同的 id (#closureModal
和#parkModal
)。
我的问题是它#parkModal
在所有页面(而不是特定页面: 、 等)上触发website.com/parks/park1
,website.com/acitivies/park1
因为它以 domain 开头website.com
。
我怎样才能允许两种不同的模态目标document.referrer
出现在不应该出现的地方?如何将 document.referrer 与两种不同的模式一起使用?
这是#closureModal
的代码:
const tsp = ["website.com"];
const closureReferrer = document.referrer;
const referrer_hostname = closureReferrer !== "" ? new URL(closureReferrer).hostname : "";
if (tsp.includes(referrer_hostname)) {
console.log("Don't Show Modal", closureReferrer);
} else {
console.log("Show Modal", closureReferrer);
$( window ).on('load', function() {
console.log("closure modal firing");
$('#closureModal .closure').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
}
这#parkModal
是类似的代码:
const domains = ["https://website.com/parks/park1", "https://website.com/parks/events/park1", "https://website.com/parks/events/park1", "https://website.com/parks/promotions/park1", "https://website.com/parks/go-green/park1", "https://website.com/parks/info/park1", "https://website.com/parks/activities/park1", "https://website.com/parks/events/park1/#/?park=park1"];
const parkReferrer = document.referrer;
if (domains.includes(parkReferrer)) {
console.log("Don't Show Modal - from Cummins page", parkReferrer);
} else {
console.log("Show Modal - From other Page", parkReferrer);
$( window ).on('load', function() {
console.log("park modal firing");
$('#parkModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
}
解决方案
我没有立即看到这个问题,但我确实有一些建议可以帮助您更接近更好的代码和更容易诊断的东西。
我看到很多代码重复。是否有必要让两个不同的窗口onload
事件都查看引用者然后决定显示哪个模式?我的建议是在一个只onload
查看document.referrer
一次的处理程序中完成所有操作,然后确定要显示的模式(如果有的话)。
有点像:
$( window ).on('load', function() {
console.log("park modal firing");
// define your parkReferrers and closureReferrers here
const referrer = document.referrer;
const displayParkReferrerModal = parkReferrers.includes(referrer);
const displayClosureModal = closureReferrers.includes(referrer);
let modalToDisplay;
if (displayParkReferrerModal) {
modalToDisplay = '#parkModal';
} else if (displayClosureModal) {
modalToDisplay = '#closureModal .closure';
}
if (modalToDisplay) {
console.log(modalToDisplay);
$(modalToDisplay).modal({
backdrop: 'static',
keyboard: false,
show: true
});
return;
}
console.log('no matching modal to display');
return;
});
希望这会有所帮助。您还可以将其抽象为一个 handleReferrerModal 函数,然后在load
事件处理程序中调用该函数。如果你有多个不同的事情发生在load
.
推荐阅读
- javascript - 使用另一个类打印一个类的多个实例
- php - 未捕获的错误:在自动加载/全局中找不到类“PDO”
- c++ - 我正在尝试编写一个程序来查找矩阵中每一列的最大元素,但由于无法将'int(*)[m]'转换为'int(*)[100]'而出现错误
- javascript - 创建查询快照以侦听实时更改
- ios - iOS-切换多个文本字段时出现约束错误
- html - 为什么 CSS 样式表在移动设备上不起作用?
- android - 无法在 Windows 10 的 Android Studio 中启动 AVD
- sql-server - 在 SQL Server 中具有读取访问权限和创建/更改视图访问权限的用户登录
- c++ - 评论中的“\p”是什么意思?
- css - 仅限 CSS:当在句子中的某个位置换行时,