Geek Answers Handbook

How to remove parameters in a url and display it in the address bar without causing a redirect in javascript?

I have found many answers on how to extract URLs without parameters.

How do you rewrite a URL in an address bar without forcing a page to reload with a new URL?

shortURL = top.location.href.substring(0, top.location.href.indexOf('?')); top.location.href = shortURL // Causes redirect

The goal is to extract the parameters in Javascript, but not display them in the address bar.

+8
javascript url parameters url-rewriting address-bar
source share
5 answers

In modern browsers with support for the History object, you can use history.replaceState() or history.pushState() to change the current URL without changing the current page. There are restrictions on what you can change (for example, you cannot change the domain / origin in this way for security reasons).

See here for a summary of these methods.

The browser history is a record of where you were in the browsing session. .replaceState() allows you to replace the current item in the history list with another. .pushState() adds a new item to the browser history, and both change the URL displayed in the browser URL bar without reloading the page. You choose which method to use depending on how you want the browser's back button to behave for that particular page entry.

Note. These APIs are supported in IE 10 and later.

In older versions of the browser without support for the history API, the only part of the URL that you can change without reloading the page is the hash tag (the part after the # character) at the end of the URL.

+12
source share

In html5, it is possible to rewrite the url without reloading the page (you still cannot change the domain name for security reasons), using the api history, you can write:

 history.replaceState("object or string", "title", "/another-new-url");

in which the first two parameters are arbitrary, and the third parameter is the new url (not including the domain name). If you want to enable the back button to return to the previous URL, use pushState instead of replaceState above. Read more about these features in this post.

As for browser support, it is supported in the latest versions of Firefox and Chrome, but only in IE10 +, which is not very common so far. See the compatibility matrix or browser implementation details for more details .

+6
source share

You cannot change the value in the address bar without redirection. That would be a dream of phishing!

However, you can change the fragment identifier : (in JavaScript, the value of window.location.hash )

 <!DOCTYPE html> <html> <head> <title>This is a test</title> <script> window.onload = function() { window.location.hash = "Loaded!"; document.getElementById("click-me").onclick = function() { window.location.hash = "Click!"; document.getElementById("click-me").onclick = function() { window.location.hash = "Clicked AGAIN!"; }; }; } </script> <body> <div> <input type="button" id="click-me" value="click me!" /> </div> </body> </html>

But changing the query string will redirect the page.

+2
source share

You might be able to use the new pushstate, which is part of the HTML 5 history API, which allows you to change the URL without actually restarting the browser.

Check out http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate for a quick example and http://diveintohtml5.info/history.html for more detailed examples and limitations:

+1
source share

I don’t think there is a possibility for this, I mean that you can probably rewrite the URL after loading it and add return false, so you will prevent the reboot, but otherwise you will have to do the POST form on the URL address to achieve that parameter is not shown.

0
source share

More articles:


All Articles