How to remove parameters in URL and display it in address bar without causing redirect in Javascript?

烈酒焚心 提交于 2019-11-28 12:11:50

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

See here for a summary of these methods.

The browser history is a recording of where you have been in your browsing session. .replaceState() allows you to replace the current item in the history list with a different one. .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 select which method to use depending upon how you want the browser's "back" button to behave for this particular page entry.

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

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

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

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

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

Regarding browser support, it is supported in recent Firefox and Chrome versions, but only in IE10+, which is not very common yet. For details see compatibility matrix or browser implementation details.

You can't change the value in the address bar without redirecting. That would be a phishing scammer's dream come true!

You can, however, change the fragment identifier: (in JavaScript, the window.location.hash value)

<!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.

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

Check 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 in depth examples and limitations:

I don't think that there is a possibility for that, I mean you probably could rewrite the URL after its loaded and add return false, so you prevent the reload but otherwise you would have to do a form POST on the url to achieve that no parameter is shown.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!