如何将 document.referrer 与两种不同的模式一起使用？答案

【问题标题】：How can I use document.referrer with two different modals?如何将 document.referrer 与两种不同的模式一起使用？
【发布时间】：2020-04-04 03:33:13
【问题描述】：

我的网站上有两种不同的模式，一种具有要定位的特定域，另一种定位具有域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
     });
  });
}

【问题讨论】：

标签： javascript debugging modal-dialog referrer

【解决方案1】：

我没有立即发现问题，但我确实有一些建议可以帮助您更接近更好的代码和更容易诊断的东西。

我看到很多代码重复。是否有必要有两个不同的窗口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 上发生了多种不同的事情，那可能会更干净。

【讨论】：