How to mask the URL after hiding a GET with history.pushState? [closed]

Question

How to mask the URL after hiding a GET with history.pushState? [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I have a search page on my system. Due to pagination I am using form data via GET. However, when I go to search something, the URL is, for example:

http://sistema.com/busca.php?nome=silva

Researching I found a "workaround" that after doing the search it returns the normal URL, not making it visible to the user. I used this:

if(typeof window.history.pushState == 'function') {
        window.history.pushState({}, "Hide", "http://sistema.com/busca.php");
}

At first it works, with some delay (lets the user see it as a flash and already changes the URL), but it works.

The problem is when I press the "Back" of the browser. It leaves the URL with the parameters again. How to solve this browser revolution? Is there a more elegant way to mask these parameters?

php javascript html

asked by anonymous 16.10.2014 / 21:51

3 answers

Problems updating record data with dataBinding in Grails I'm having trouble with Bower installation, how do I solve it? [closed]

score 0 · Answer 1

Instead of pushState use replaceState , with me it works very well, and you can also use setTimeout to call a function of limpar a url () after a time if you want a delay . Home If you want an example I did a function in JQuery for my use, just adapt it according to your need:

function limpaUrl() {     //função
    urlpg = $(location).attr('href');   //pega a url atual da página
    urllimpa = urlpg.split("?")[0]      //tira tudo o que estiver depois de '?'

    window.history.replaceState(null, null, urllimpa); //subtitui a url atual pela url limpa
}

setTimeout(limpaUrl, 4000) //chama a função depois de 4 segundos

score 0 · Answer 2

Do something like this [a pity that replaceState does not work in IE 7,8 and 9]:

function recoverUrlNotParams() { 
 var params = window.location.search;
 var url = window.location.pathname;
 if (window.history.replaceState) {
                    window.history.replaceState('Object', this.title,  url);
                } else {
                    //para o IE vc tem que redirecionar
                     if (url.indexOf(params) != -1) {
                        window.location.href = url;
                    }
                }
}

score 0 · Answer 3

I joined the responses from @Sergio, @Baccon.

Be in jsFiddle

HTML

<div id="conteudo"></div>
<form name="paginacao" id="paginacao" method="post" action="javascript:void(0)">
    <input name="pag" id="pag" type="hidden"/>
    <div>
        <p class="left pagina_1">1</p>
        <p class="left pagina_2">2</p>
        <p class="left pagina_3">3</p>
        <p class="left pagina_4">4</p>
        <p class="left pagina_5">5</p>
    </div>
</form>

JS

jQuery(document).ready(function(){

    jQuery('form#paginacao').on('click', 'p', function(){
        var pagina = parseInt(jQuery(this).text());
        jQuery('input#pag').val(pagina);
        jQuery('form#paginacao').submit();
    });

     jQuery('form#paginacao').on('submit', function(){
         var pagina = jQuery(this).find('input#pag').val();
         alert(pagina);
         // AQUI VOCE CRIA UM AJAX
         /*
         jQuery.ajax({
            url: {url},
            data: 'pagina='+pagina,
            success: function(msg){
                jQuery('#conteudo').html(msg);
            }
         });
         */
     });

});