如果用户来自网站上的先前页面，则执行此操作，否则执行另一项操作。

Question

如何实现以下需求的可行方法：

一个网站有两个页面：父页面和内部页面。如果用户直接通过输入地址或从非父页面链接跳转到内部页面，则显示“foo”。如果用户是从父页面进入内部页面，则显示“bar”。

如果可能，我需要用JS完成此任务。如果不行，PHP是次选项。

- beliy333

---

正是为了这个目的 $_SERVER['HTTP_REFERER'] 才被填充。 :) - Jigar

如果您有多个页面，请使用PHP Session将当前URL存储为上一个URL，并在所有页面中检查会话值。使用echo basename($_SERVER['PHP_SELF']);获取页面名称。 - Nikz

可能是在JavaScript中获取引荐URL的重复问题。 - Elias Rodrigues

我认为你可以通过以下方式实现：在父页面中使用JS或PHP将隐藏参数传递给输入字段，每当用户单击父页面时，该隐藏值将被生成。当它进入内部页面时，您可以检查该隐藏值，如果找到，则表示用户来自父页面，否则来自直接访问。 - Monty

为什么你不能将foo和bar分成两个页面呢？或者至少添加一个参数来确定是显示foo还是bar？ - user253751

在我的情况下，我可以选择使用 $_SERVER['HTTP_REFERER'] 或者像 @Monty 建议的那样，在父页面上传递一个隐藏参数。哪个选项比另一个更合适？ - beliy333

Answer 1

你可以使用 document.referrer 获取用户来自哪个页面。

因此，你可以这样实现你的解决方案：

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

- pedrotp

Answer 2

请尝试这个

这段代码在第二页中

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

这是父页面的代码

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

- Rino Raj

---

您的代码似乎存在语法错误。请给我一个空白屏幕。 - beliy333

因为我是通过 AJAX 加载内部页面而不是单独的页面，所以这似乎是最合适的答案，并且对我的情况有效。 - beliy333

Answer 3

使用PHP：

有一种简单的方法是创建一个中介页面，当创建一个会话/cookie后重定向到内部页面。然后，如果您获取了会话/cookie，您就会显示foo并取消会话。

如果有人直接从URL访问，则找不到会话/cookie，它会显示bar。

- Munjal Mayank

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");
}

这种方法并非百分之百可靠，因为用户可能会输入与您的父页面链接相同的URL。为了更好的准确性，请先检查document.referrer，如果未设置，请使用我上面概述的方法。

- Bug

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>

- MwamiTovi