重定向到新的HTML页面后隐藏div

Question

I have two html pages index.html and register.html From index.html I need to go to register.html and show Login page after skipping select region. below is the code I am trying.

$("#lgnToProfile").on("click", function(){
window.location.href = "register.html";
$("#slctRgn").hide();
$("#lgnPage").show();
});

Can anyone check and suggest me how to resolve this and what I am doing wrong?

I referred the solutions provide at Show DIV or Section after redirecting to html page But no success.

Answer 1

Once you navigate to a new page, none of the Javascript that ran on the previous page has any effect anymore.

What you would need to do, is somehow inform register.html that it needs to hide the select region div and then hide the div from a script running in register.html .

For example, from index.html you could add a query string parameter to notify register.html .

$("#lgnToProfile").on("click", function() {
    window.location.href = "register.html?hideSlctRgn=1";
}

Then, from register.html , on document ready , check if the parameter is set and hide the div accordingly.

$(function() {
    if ( window.location.search.indexOf('hideSlctRgn=1') != -1 ) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
})

There are other (better) ways to test for the existence of a query string parameter, but the above is a simple way. Instead of a query string parameter you could set a cookie, or perhaps use local storage.

Answer 2

If you don't want to modifie your URL path, you can do it with "localStorage":

var currentPath = window.location.pathname;
var savedPath   = localStorage.getItem('previousPage');

// if a page has been saved yet
if (typeof savedPath === 'string') {

    // if the current page is "register.html" and the saved page is "index.html"
    if (currentPath.match('/register.html') && savedPath.match('/index.html')) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
}

// save current page
localStorage.setItem('previousPage', currentPath);

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

Answer 3

You need to check the referer page to take further action on the next page. Because JavaScript can't access the referer page, you could achieve that using an anchor or hash to check for the referer and show/hide your elements.

On index.html you just need the link (no click jQuery event needed) to the registration page appending a hash name: register.html#referer . The word referer could be whatever you want to.

Then on register.html you need to evaluate the hash value:

$(document).ready(function() {

    // get the hash value
    var hash = window.location.hash;

    // if the hash is defined and it’s equal to “referer” (the choosen hash value)
    if(hash == "#referer") {

        // execute your code to show or hide elements

    }

});