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

Asked

Viewed 6,543 times

2

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

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

Searching I found a "workaround" that after having done the search it returns the normal URL, not leaving 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 (let the user see how 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 resolve this browser back? There is a more elegant way to mask these parameters?

php javascript html
  • 5

    The ideal is to use the POST method, so the search is not in the URL. The History API was not made for this. Post paging is quiet, just use Hidden fields. And in the worst case, you can mix GET with POST if you need to, sending the fields with POST, but mounting Urls with parameters).

  • I was using POST, but it ended up giving some problems in the pagination. Example: when I went from the first to the second page, the query got lost, did not respect the search I was doing and returned to its initial state.

  • 1

    The ideal is to fix the problem, but do it the right way. Wanting to improvise usually ends up in more problems. If it didn’t work, some stage of knowledge was missing. I would suggest working harder on the POST part to have an app that won’t give you a headache in the future. At first it can be boring to solve, but it is a knowledge that will serve you for a lot of things in other situations. Understanding how to work with POST and GET is an essential thing for web applications.

  • Ok, I agree. But so, when you say, "just use Hidden fields". Isn’t that kind of field invisible to the user? How would he use?

  • In the field Hidden you will put the current search, and the desired page number. The field it enters will be normal, and not Hidden.

  • 3

    Why not make that request via AJAX and change only the page content?

  • @Bacco obg, I’m going to do a little research on how to do this. Sergio, honestly, because I don’t know how to haha.. Some link that could help me out?

  • 1

    @Ziad.ali I need to do other things now, but if I find a good reference, I’ll let you know. Master GET and POST, because these are things you’ll find all the time.

  • Beauty @Bacco was worth!

  • Ziad, Ajax seems difficult at first but there’s not much mystery, and after you get the hang of it, you won’t want to stop using ;)

  • You could use the . htaccess

  • Agree with @Khaosdoctor, . htaccess you can create a rule that rewrites your URL.

Show 7 more comments

3 answers

0

In place of pushState use replaceState, works very well with me, and can also use setTimeout to call a function of limpar a url () after a while if you want a delay.
If you want an example I made a function in Jquery for my use, just adapt 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

  • Are not working on IE.

0

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

0

I joined the responses from the @Sergio, @Baccon comments.

Be it in the 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);
            }
         });
         */
     });

});

  • @Sergio, feel free to edit, because you know better than me.

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.