Home » Php » javascript – If user came from previous page on site then this, else do this

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

Posted by: admin July 12, 2020 Leave a comment

Questions:

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.

How to&Answers:

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

Answer:

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
}

Answer:

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

Answer:

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

Answer:

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>