How to remove parameters in URL and display it in

2020-02-06 06:26发布

站内问答 / JavaScript
1048 5 4

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.

5条回答
萌系小妹纸
2楼-- · 2020-02-06 06:53

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.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
3楼-- · 2020-02-06 06:58

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.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
4楼-- · 2020-02-06 07:05

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.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
5楼-- · 2020-02-06 07:07

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.

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
6楼-- · 2020-02-06 07:13

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:

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)