If the user came from the previous page on the site, then do it, otherwise do it

Question

What would be a viable way to accomplish the following:

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

I will need to do this in JS if possible. If not, PHP is a secondary choice.

Answer 1

Please, try

This code is on the second page.

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

This code is on the parent page

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

Answer 2

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

So, you can implement your solution as follows:

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

Answer 3

with php :

There is an easy way to create an intermediary page that redirects to the internal page after the session / cookie .. then if you get a session / cookie you will see foo and unset session.

if someone comes directly from the url, there is no session / cookie and a panel is displayed.

Answer 4

You can use document.referrer, but this is not always set. You can add a parameter to the URL of the parent page and then check its existence on the child page

Link to 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 is not 100% reliable, as users can enter the same URL as the link to the parent page. For best accuracy, first check the .referrer document, and if it is not installed, use the method described above.

Answer 5

smart rendering using jQuery

After using @Rino Raj's answer, I noticed that it needs to be improved.

In javascript, the load () or onload () event is in most cases much slower because it expects loading of all content and images before executing attached functions.

While the event attached to the jQuerys ready () event is executed as soon as the DOM is fully loaded, or all the markup, JavaScript and CSS content, but not the image.

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

Then I reorganized the code using the ready () event, and yes, the content that I intended to hide / disappear does not appear at all. Follow the code below to understand 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>