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

StackOverflow https://stackoverflow.com/questions/8510755

题

I have found numerous answers on how to extract the URL without the parameters.

How do you rewrite the URL in the address bar without causing the page to reload with the 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.

有帮助吗？

解决方案

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.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top