如果用户来自网站上的上一页,那么这个,否则这样做


If user came from previous page on site then this, else do this

实现

以下目标的可行方法是什么:

一个网站有两个页面;父页面和内部页面。如果用户通过键入地址或点击父页面以外的页面的链接直接进入"内部"页面,则显示"foo"。如果用户从父页面进入"内部"页面,则显示"bar"。

如果可能的话,我需要在JS中完成此操作。如果没有,PHP 是次要选择。

您可以使用

document.referrer获取用户来自的页面。

因此,您可以像这样实现您的解决方案:

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

请尝试此

此代码在第二页

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

父页中的此代码

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

with php

有一个简单的方法是创建一个中介页面,在制作会话/cookie后重定向到内页......然后,如果你得到会话/cookie,你显示foo和unset会话。

如果有人直接来自URL,则找不到会话/cookie,它显示栏。

您可以使用 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,如果未设置,请使用我上面概述的方法

使用 jQuery 进行智能渲染

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

在javascript中,load()或onload()事件大多数时候要慢得多,因为它在执行附加功能之前等待所有内容和图像加载。

而附加到jQuery的ready()事件的事件在DOM完全加载后立即执行,或者所有标记内容,JavaScript和CSS,但不是图像。

让我解释一下这种基于代码的方法。当我使用 Raj 的代码时@Rino load() 事件,它可以工作,但在第二个/被调用的页面上,内容出现在添加 class="隐藏淡入淡出"之前(我并不真正想要)。

然后我使用 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>