如果用戶來自網站上的上一頁，那么這樣做，否則就這樣做

Question

什么是實現以下目標的可行方法：

一個網站有兩頁; 父頁面和內頁面。 如果用戶通過鍵入地址或通過父頁面以外的頁面中的鏈接直接進入Inside頁面，則顯示“foo”。 如果用戶從父頁面進入Inside頁面，則顯示“bar”。

如果可能的話，我需要在JS中完成這項工作。 如果沒有，PHP是次要的選擇。

Answer 1

您可以使用document.referrer獲取用戶來自的頁面。

所以你可以像這樣實現你的解決方案：

if (document.referrer === 'yoursite.com/parentpage') {
  // do bar
} else {
  // do foo
}

Answer 2

請試試這個

這段代碼在第二頁

jQuery(window).load(function() {
  if (sessionStorage.getItem('dontLoad') == null) {
    //show bar
  }
  else{
    //show foo
  }
});

父代頁面中的此代碼

jQuery(window).load(function() {
  sessionStorage.setItem('dontLoad','true') 
});

Answer 3

with php ：

有一種簡單的方法是創建一個中介頁面，該頁面在創建會話/ cookie后重定向到內部頁面。然后，如果你將獲得session / cookie，則顯示foo和unset session。

如果有人直接來自網址，沒有找到會話/ cookie並顯示欄...

Answer 4

您可以使用document.referrer，但並不總是這樣設置。 您可以在父頁面上的URL中添加參數，然后在子頁面中檢查它是否存在

父頁面上的鏈接：

<a href='myChildPage.html?fromParent=1'>My Child Page</a>

子頁面上的JS代碼：

var fromParent=false;
var Qs = location.search.substring(1);
var pairs = Qs.split("&");
for(var i = 0; i < pairs.length; i++){
    var pos = pairs[i].indexOf('=');
    if(pos!==-1){
        var paramName = pairs[i].substring(0,pos);
        if(paramName==='fromParent'){
            fromParent=true;
            break;
        }
    }
}

if(fromParent){
    alert("From Parent");
}else{
    alert("NOT From Parent");
}

這種方法不是100％萬無一失，因為用戶可以輸入與父頁面鏈接相同的URL。 為了更好的准確性，首先檢查document.referrer，如果沒有設置，請使用我上面概述的方法

Answer 5

使用jQuery進行智能渲染

使用@Rino Raj答案后，我注意到它需要改進。

在javascript中，load（）或onload（）事件大多數時候要慢得多，因為它在執行附加函數之前等待加載所有內容和圖像。

雖然附加到jQuery的ready（）事件的事件在DOM完全加載后執行，或者所有標記內容，JavaScript和CSS，但不是圖像。

讓我在代碼上解釋這個基礎。 當我使用@Rino Raj的代碼時，使用load（）事件，它可以工作但是在第二個/被調用的頁面上，內容出現在class =“hide fade”之前（我真的不想要）。

然后我使用ready（）事件重構代碼，是的，我打算隱藏/淡化的內容根本不會出現。 按照下面的代碼來掌握概念。

<!-- Parent/caller page -->
<script type="text/javascript">
  $(document).ready(function() {
    sessionStorage.setItem('dontLoad', 'true');
  });
</script>

<!-- Second/called page -->
<script type="text/javascript">
  $(document).ready(function() {
    if(sessionStorage.getItem('dontLoad') == null) {
      $("#more--content").removeClass("hide fade");
    } else {
      $("#more--content").addClass("hide fade");
    }
  });
</script>