blocks|key|2878278|text|那么历史API就是您正在寻找的东西。如果您也希望支持传统浏览器，那么如果浏览器不提供历史API，那么可以寻找一个依赖于处理URL的散列标记的库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2878279|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Then the history API is exactly what you are looking for. If you wish to support legacy browsers as well, then look for a library that falls back on manipulating the URL's hash tag if the browser doesn't provide the history API.

blocks|key|3092256|text|我已经成功地使用了以下JavaScript库：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3092257|https://github.com/balupton/jquery-history|offset|length|3092258|它支持HTML5历史应用编程接口以及针对较旧浏览器的回退方法(使用#)。|3092259|这个库本质上是一个围绕‘history.push+around’的polyfill。|3092260|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

I've used the following JavaScript library with great success: 

<a href="https://github.com/balupton/jquery-history" rel="nofollow">https://github.com/balupton/jquery-history</a>

It supports the HTML5 history API as well as a fallback method (using #) for older browsers.

This library is essentially a polyfill around `history.pushState'.

blocks|key|222024|text|如果您正在寻找Hash修改，您的解决方案工作良好。但是，如果您想要更改查询，则可以使用pushState。下面是一个可能帮助您正确实现它的示例。我测试了一下，它工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222025|if+(history.pushState)+{
++++var+newurl+=+window.location.protocol+%2B+"//"+%2B+window.location.host+%2B+window.location.pathname+%2B+'?myNewUrlQuery=1';
++++window.history.pushState({path:newurl},'',newurl);
}|code-block|syntax|javascript|222026|它不会重新加载页面，但只允许您更改URL查询。您将无法更改协议或主机值。当然，它需要能够处理HTML5历史API的现代浏览器。|222027|有关详细信息，请参阅：|222028|http://diveintohtml5.info/history.html|offset|length|222029|https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history|222030|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|12|0|0|0|2J|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$M|17|N|18|1|19]]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|L]]|X|$5|T|U|V|A|$W|P]]]]

If you are looking for Hash modification, your solution works ok. However, if you want to change the query, you can use the pushState, as you said. Here it is an example that might help you to implement it properly. I tested and it worked fine:

<pre><code>if (history.pushState) {
 var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
 window.history.pushState({path:newurl},'',newurl);
}
</code></pre>

It does not reload the page, but it only allows you to change the URL query. You would not be able to change the protocol or the host values. And of course that it requires modern browsers that can process HTML5 History API.

For more information:

<a href="http://diveintohtml5.info/history.html" rel="noreferrer">http://diveintohtml5.info/history.html</a>

<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history</a>

blocks|key|3092359|text|根据Fabio的回答，我创建了两个函数，这两个函数可能对遇到这个问题的任何人都有用。使用这两个函数，您可以使用键和值作为参数来调用insertParam()。它将添加URL参数，或者，如果已存在具有相同键的查询参数，则会将该参数更改为新值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3092360|//function+to+remove+query+params+from+a+URL
function+removeURLParameter(url,+parameter)+{
++++//better+to+use+l.search+if+you+have+a+location/link+object
++++var+urlparts=+url.split('?');+++
++++if+(urlparts.length>=2)+{

++++++++var+prefix=+encodeURIComponent(parameter)%2B'=';
++++++++var+pars=+urlparts[1].split(/[&;]/g);

++++++++//reverse+iteration+as+may+be+destructive
++++++++for+(var+i=+pars.length;+i--+>+0;)+{++++
++++++++++++//idiom+for+string.startsWith
++++++++++++if+(pars[i].lastIndexOf(prefix,+0)+!==+-1)+{++
++++++++++++++++pars.splice(i,+1);
++++++++++++}
++++++++}

++++++++url=+urlparts[0]+%2B+(pars.length+>+0+?+'?'+%2B+pars.join('&')+:+"");
++++++++return+url;
++++}+else+{
++++++++return+url;
++++}
}

//function+to+add/update+query+params
function+insertParam(key,+value)+{
++++if+(history.pushState)+{
++++++++//+var+newurl+=+window.location.protocol+%2B+"//"+%2B+window.location.host+%2B+search.pathname+%2B+'?myNewUrlQuery=1';
++++++++var+currentUrlWithOutHash+=+window.location.origin+%2B+window.location.pathname+%2B+window.location.search;
++++++++var+hash+=+window.location.hash
++++++++//remove+any+param+for+the+same+key
++++++++var+currentUrlWithOutHash+=+removeURLParameter(currentUrlWithOutHash,+key);

++++++++//figure+out+if+we+need+to+add+the+param+with+a+?+or+a+&
++++++++var+queryStart;
++++++++if(currentUrlWithOutHash.indexOf('?')+!==+-1){
++++++++++++queryStart+=+'&';
++++++++}+else+{
++++++++++++queryStart+=+'?';
++++++++}

++++++++var+newurl+=+currentUrlWithOutHash+%2B+queryStart+%2B+key+%2B+'='+%2B+value+%2B+hash
++++++++window.history.pushState({path:newurl},'',newurl);
++++}
}|code-block|syntax|javascript|3092361|entityMap^0|1T|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Building off of Fabio's answer, I created two functions that will probably be useful for anyone stumbling upon this question. With these two functions, you can call <code>insertParam()</code> with a key and value as an argument. It will either add the URL parameter or, if a query param already exists with the same key, it will change that parameter to the new value:

<pre><code>//function to remove query params from a URL
function removeURLParameter(url, parameter) {
 //better to use l.search if you have a location/link object
 var urlparts= url.split('?'); 
 if (urlparts.length&gt;=2) {

 var prefix= encodeURIComponent(parameter)+'=';
 var pars= urlparts[1].split(/[&amp;;]/g);

 //reverse iteration as may be destructive
 for (var i= pars.length; i-- &gt; 0;) { 
 //idiom for string.startsWith
 if (pars[i].lastIndexOf(prefix, 0) !== -1) { 
 pars.splice(i, 1);
 }
 }

 url= urlparts[0] + (pars.length &gt; 0 ? '?' + pars.join('&amp;') : "");
 return url;
 } else {
 return url;
 }
}

//function to add/update query params
function insertParam(key, value) {
 if (history.pushState) {
 // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
 var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
 var hash = window.location.hash
 //remove any param for the same key
 var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

 //figure out if we need to add the param with a ? or a &amp;
 var queryStart;
 if(currentUrlWithOutHash.indexOf('?') !== -1){
 queryStart = '&amp;';
 } else {
 queryStart = '?';
 }

 var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
 window.history.pushState({path:newurl},'',newurl);
 }
}
</code></pre>

blocks|key|225414|text|我想改进Fabio的答案，并创建一个函数，无需重新加载页面即可向URL字符串添加自定义键。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|225415|function+insertUrlParam(key,+value)+{
++++if+(history.pushState)+{
++++++++let+searchParams+=+new+URLSearchParams(window.location.search);
++++++++searchParams.set(key,+value);
++++++++let+newurl+=+window.location.protocol+%2B+"//"+%2B+window.location.host+%2B+window.location.pathname+%2B+'?'+%2B+searchParams.toString();
++++++++window.history.pushState({path:+newurl},+'',+newurl);
++++}
}|code-block|syntax|javascript|225416|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I want to improve Fabio's answer and create a function which adds custom key to the URL string without reloading the page.

<pre><code>function insertUrlParam(key, value) {
 if (history.pushState) {
 let searchParams = new URLSearchParams(window.location.search);
 searchParams.set(key, value);
 let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
 window.history.pushState({path: newurl}, '', newurl);
 }
}
</code></pre>

blocks|key|2878409|text|因为每个回答这个问题的人似乎都忘记了散列，所以我想添加我用来保存所有+URL参数的代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2878410|const+urlParams+=+new+URLSearchParams(window.location.search);

///+Change+some+part+of+the+URL+params

if+(history.pushState)+{
++const+newurl+=
++++window.location.protocol+%2B
++++"//"+%2B
++++window.location.host+%2B
++++window.location.pathname+%2B
++++"?"+%2B
++++urlParams.toString()+%2B
++++window.location.hash;
++window.history.replaceState({+path:+newurl+},+"",+newurl);
}+else+{
++window.location.search+=+urlParams.toString();
}|code-block|syntax|javascript|2878411|entityMap^0|W|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Since everyone answering this seems to forget the hash, I want to add the code I'm using to keep all URL parameters:
<pre><code>const urlParams = new URLSearchParams(window.location.search);

/// Change some part of the URL params

if (history.pushState) {
 const newurl =
 window.location.protocol +
 &quot;//&quot; +
 window.location.host +
 window.location.pathname +
 &quot;?&quot; +
 urlParams.toString() +
 window.location.hash;
 window.history.replaceState({ path: newurl }, &quot;&quot;, newurl);
} else {
 window.location.search = urlParams.toString();
}
</code></pre>

blocks|key|2878428|text|我想我应该对法比奥和阿兰姆的回答补充一点。我想有时我可能想保留url中的散列。但通常不会，所以我将该参数设置为缺省为false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2878429|replaceState仍然不会在Chrome上设置页面标题。因此，如果提供了标题，我添加了几行代码来更改标题。|2878430|function+insertUrlParam(key,+value,+title+=+'',+preserve_hash+=+false)+{
++++if+(history.pushState)+{
++++++++let+searchParams+=+new+URLSearchParams(window.location.search);
++++++++searchParams.set(key,+value);
++++++++let+newurl+=+window.location.protocol+%2B+"//"+%2B+window.location.host+%2B+window.location.pathname
++++++++++++%2B+'?'+%2B+searchParams.toString();
++++++++if(preserve_hash)+newurl+=+newurl+%2B+window.location.hash;
++++++++let+oldTitle+=+document.title;
++++++++if(title+!==+'')+{
++++++++++++window.history.replaceState({path:+newurl},+title,+newurl);
++++++++++++if(document.title+!==+title)+{+//+fallback+if+above+doesn't+work
++++++++++++++++document.title+=+title;
++++++++++++}
++++++++}+else+{+//+in+case+browsers+ever+clear+titles+set+with+empty+string
++++++++++++window.history.replaceState({path:+newurl},+oldTitle,+newurl);
++++++++}
++++}
}|code-block|syntax|javascript|2878431|entityMap^0|1M|5|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I thought I'd add a bit to Fabio and Aram's answers. I thought I might sometimes like to preserve the hash in the url. But usually not, so I set that parameter to default to <code>false</code>.
<code>replaceState</code> still does not set the page title on Chrome. So I added a couple lines to change the title, if one is provided.
<pre><code>function insertUrlParam(key, value, title = '', preserve_hash = false) {
 if (history.pushState) {
 let searchParams = new URLSearchParams(window.location.search);
 searchParams.set(key, value);
 let newurl = window.location.protocol + &quot;//&quot; + window.location.host + window.location.pathname
 + '?' + searchParams.toString();
 if(preserve_hash) newurl = newurl + window.location.hash;
 let oldTitle = document.title;
 if(title !== '') {
 window.history.replaceState({path: newurl}, title, newurl);
 if(document.title !== title) { // fallback if above doesn't work
 document.title = title;
 }
 } else { // in case browsers ever clear titles set with empty string
 window.history.replaceState({path: newurl}, oldTitle, newurl);
 }
 }
}
</code></pre>

blocks|key|225071|text|如果我们只是想在不接触URL的其他部分的情况下更新查询参数，则不需要再次构建URL。这是我使用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|225072|​|225073|const+addQueryParam+=+(key,+value)+=>+{
++const+url+=+new+URL(window.location.href);
++url.searchParams.set(key,+value);
++window.history.pushState({},+'',+url.toString());
};

const+getQueryParam+=+(key)+=>+{
++const+url+=+new+URL(window.location.href);
++return+url.searchParams.get(key)+%7C%7C+'';
};|code-block|syntax|javascript|225074|225075|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

If we simply want to update the query parameter without touching other parts of URL, there is no need to build the URL again. This is what I use:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const addQueryParam = (key, value) =&gt; {
 const url = new URL(window.location.href);
 url.searchParams.set(key, value);
 window.history.pushState({}, '', url.toString());
};

const getQueryParam = (key) =&gt; {
 const url = new URL(window.location.href);
 return url.searchParams.get(key) || '';
};</code></pre>
</div>
</div>

blocks|key|2878482|text|老问题，帮助未来开发人员的现代答案；使用URL接口：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2878483|const+url+=+new+URL(window.location);
url.searchParams.set('key',+value);
window.history.pushState(null,+'',+url.toString());|code-block|syntax|javascript|2878484|这确保了您实际上只更改了所需的查询参数。|2878485|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/URL^0|K|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Old question, modern answer to help future devs; using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL" rel="nofollow noreferrer">URL</a> interface:
<pre class="lang-js prettyprint-override"><code>const url = new URL(window.location);
url.searchParams.set('key', value);
window.history.pushState(null, '', url.toString());
</code></pre>
This makes sure you really only change the desired query-parameter.

I am creating a photo gallery, and would like to be able to change the query string and title when the photos are browsed.

The behavior I am looking for is often seen with some implementations of continuous/infinite page, where while you scroll down the query string keeps incrementing the page number (<a href="http://x.com?page=4" rel="noreferrer">http://x.com?page=4</a>) etc.. This should be simple in theory, but I would like something that is safe across major browsers.

I found <a href="https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page">this great post</a>, and was trying to follow the example with <code>window.history.pushstate</code>, but that doesn't seem to be working for me. And I'm not sure if it is ideal because I don't really care about modifying the browser history.

I just want to be able to offer the ability to bookmark the currently viewed photo, without reloading the page every time the photo is changed.

Here is an example of infinite page that modifies query string: <a href="http://tumbledry.org/" rel="noreferrer">http://tumbledry.org/</a>

UPDATE found this method:

<pre><code>window.location.href = window.location.href + '#abc';
</code></pre>

it appears to work for me, but i am on a new chrome.. it would probably cause some issues with older browsers?

Modifying a query string without reloading the page

HTML5

我正在创建一个相册，并希望能够改变查询字符串和标题时，照片被浏览。我正在寻找的行为经常出现在连续/无限页面的一些实现中，当您向下滚动时，查询字符串会不断递增页码()等。这在理论上应该很简单，但我想要的是跨主要浏览器安全的东西。我找到了，并尝试用window.history.pushstate学习这个例子，但这似乎对我不...

问修改查询字符串而不重新加载页面
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修改查询字符串而不重新加载页面EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修改查询字符串而不重新加载页面
EN