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

Question

What would be a viable way to accomplish the following:

A website has two pages; Parent page and Inside page. If user came to the Inside page directly by typing in the address or by following a link from a page other than Parent page, then show "foo". If user came to the Inside page from the parent page, then show "bar".

I would need this done in JS if possible. If not, PHP is a secondary choice.

exactly for this purpose `$_SERVER['HTTP_REFERER']` is populated. :) — Jigar, Feb 08 '16 at 05:20
If you have multiple pages, use PHP Session to store the current url as previous one and check the session value in all the pages. Use echo basename($_SERVER['PHP_SELF']); to get page name. — Nikz, Feb 08 '16 at 05:21
Possible duplicate of [Get the referral url in javascript](http://stackoverflow.com/questions/4131455/get-the-referral-url-in-javascript) — Elias Rodrigues, Feb 08 '16 at 05:32
i think you can do it by this way : Pass hidden parameter in input filed by js or php in parent page, whenever user click on parent page, that hidden value will be generated and when it go to inside page, you can check that hidden value in inside page, if you found then user come from parent else from direct — Monty, Feb 08 '16 at 05:33
Why can't you separate foo and bar into two pages? Or at least add a parameter that determines whether foo or bar gets shown? — user253751, Feb 08 '16 at 09:43
Seems in my case, I can go two ways, `$_SERVER['HTTP_REFERER']` or just by passing a hidden parameter on parent page as @Monty suggests. Would one option be more appropriate than the other? — beliy333, Feb 08 '16 at 14:11

score 7 · Answer 1 · answered Feb 08 '16 at 07:05

7

You can get the page the user came from with document.referrer.

So you could implement your solution like this:

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

answered Feb 08 '16 at 07:05

pedrotp

308
1
7

score 4 · Accepted Answer · edited Feb 12 '16 at 06:32

4

Please try this

This code in second page

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

This code in parent page

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

edited Feb 12 '16 at 06:32

Henk van Boeijen

7,357
6
32
42

answered Feb 08 '16 at 05:34

Rino Raj

6,264
2
27
42

there seems to be a syntax error with your code. Give me a blank screen. – beliy333 Feb 12 '16 at 05:46
because I'm loading the inside page via ajax and not a separate page, this seems to be the most appropriate answer and it works for my case. – beliy333 Feb 12 '16 at 06:21

score 2 · Answer 3 · answered Feb 08 '16 at 05:40

with php:

There is a simple way is to create a mediator page which redirect to inner page after make a session / cookie.. then if you'll get session / cookie, you show foo & unset session.

if someone directly come from url, no session / cookie found & it show bar..

Bug · Answer 4 · 2016-02-08T09:32:12.290

You can use the document.referrer but this is not always set. You could add a parameter to the URL on the parent page and then check for its existance in the child page

Link on the parent page:

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

JS code on your child page:

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

This method isnt 100% foolproof either as users could type in the same URL as your parent page link. For better accuracy check the document.referrer first and if not set use the method i've outlined above

score 0 · Answer 5 · answered Jun 24 '19 at 10:33

intelligent rendering with jQuery

After using @Rino Raj answer, i noticed it needed improvement.

In javascript, the load() or onload() event is most times much slower, since it waits for all content and images to load before executing your attached functions.

While an event attached to jQuery’s ready() event is executed as soon as the DOM is fully loaded, or all markup content, JavaScript and CSS, but not images.

Let me explain this basing, on code. When i used @Rino Raj's code, with load() event, it works but on the second/called page, the content appears before class="hide fade" is added (which I don't really want).

Then i refactored the code, using the ready() event, and yes, the content that i intended to hide/fade doesn't appear at all. Follow the code, below, to grasp the concept.

<!-- 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>

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

5 Answers5