我在网站上有两种不同的模式,一种以特定的域作为目标,另一种以域为website.com
的所有页面为目标。这两个模态都以document.referrer
为目标,并且每个模态都有不同的ID(#closureModal
和#parkModal
)。
[我的问题是#parkModal
在所有页面上触发(而不是在特定页面上:website.com/parks/park1
,website.com/acitivies/park1
等),因为它以域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
上发生了多种不同的事情,那可能会更干净。