如何將 document.referrer 與兩種不同的模式一起使用？

Question

我的網站上有兩種不同的模式，一種是針對特定域的，另一種是針對所有具有域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
     });
  });
}

Answer 1

我沒有立即看到這個問題，但我確實有一些建議可以幫助您更接近更好的代碼和更容易診斷的東西。

我看到很多代碼重復。 是否有必要有兩個不同的 window 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 function，然后在load事件處理程序中調用它。 如果您在load上發生了多種不同的事情，那可能會更干凈。