blocks|key|1727625|text|请改用jQuery+hashchange+event插件。关于完整的ajax导航，请尝试使用SEO+friendly+ajax。否则，您的页面在具有JavaScript限制的浏览器中不会显示任何内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1727626|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cowboy/jquery-hashchange|1|http://www.chazzuka.com/blog/?p=90^0|3|N|0|1A|H|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Use the <a href="https://github.com/cowboy/jquery-hashchange" rel="noreferrer">jQuery hashchange event</a> plugin instead. Regarding your full ajax navigation, try to have <a href="http://www.chazzuka.com/blog/?p=90" rel="noreferrer">SEO friendly ajax</a>. Otherwise your pages shown nothing in browsers with JavaScript limitations.

blocks|key|1512589|text|另一个很好的实现是balupton的jQuery+History，如果浏览器支持它，它将使用原生onhashchange事件，如果不支持，它将使用适合浏览器的iframe或interval，以确保所有预期的功能都被成功模拟。它还提供了一个很好的接口来绑定到某些状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1512590|另一个值得注意的项目是jQuery+Ajaxy，它很大程度上是ajax历史的扩展，可以将jQuery添加到其中。当您开始使用带哈希的ajax时，它得到的是quite+complicated！|1512591|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/balupton/jquery-history|1|https://github.com/balupton/jquery-ajaxy|2|https://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206^0|I|E|0|0|B|C|1|25|H|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

Another great implementation is balupton's <a href="https://github.com/balupton/jquery-history" rel="nofollow noreferrer">jQuery History</a> which will use the native onhashchange event if it is supported by the browser, if not it will use an iframe or interval appropriately for the browser to ensure all the expected functionality is successfully emulated. It also provides a nice interface to bind to certain states.

Another project worth noting as well is <a href="https://github.com/balupton/jquery-ajaxy" rel="nofollow noreferrer">jQuery Ajaxy</a> which is pretty much an extension for jQuery History to add ajax to the mix. As when you start using ajax with hashes it get's <a href="https://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206">quite complicated</a>!

blocks|key|1727758|text|HTML5包含了一个比使用hashchange更好的解决方案，这就是HTML5状态管理APIs+https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history+-它们允许你更改页面的url，而不需要使用哈希！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1727759|尽管只有HTML5浏览器才能使用HTML5状态功能。所以你可能想使用像History.js这样的东西，它为HTML4浏览器提供了向后兼容的体验(通过哈希，但仍然支持数据和标题以及replaceState功能)。|1727760|你可以在这里阅读更多信息：https://github.com/browserstate/History.js|1727761|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history|1|https://github.com/browserstate/History.js|2^0|1C|1X|0|0|Z|A|1|0|D|16|2|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|Q]]]]

HTML5 has included a much better solution than using hashchange which is the HTML5 State Management APIs - <a href="https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history" rel="noreferrer">https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history</a> - they allow you to change the url of the page, without needing to use hashes!

Though the HTML5 State Functionality is only available to HTML5 Browsers. So you probably want to use something like <a href="https://github.com/browserstate/History.js" rel="noreferrer">History.js</a> which provides a backwards compatible experience to HTML4 Browsers (via hashes, but still supports data and titles as well as the replaceState functionality).

You can read more about it here:
<a href="https://github.com/browserstate/History.js" rel="noreferrer">https://github.com/browserstate/History.js</a>

blocks|key|1512713|text|我执行以下操作，如果您想使用它，则将其粘贴到某个位置，并将处理程序代码设置在locationHashChanged(qs)中注释过的位置，然后在每次加载ajax请求时调用changeHashValue(hashQuery)。这不是一个快速修复的答案，也没有一个，所以你需要考虑一下，把合理的hashQuery参数(即a=1&b=2)传递给changeHashValue(hashQuery)，然后在你的locationHashChanged(qs)回调中迎合上述参数的每一个组合……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1512714|//+Add+code+below+...
function+locationHashChanged(qs)
{
++var+q+=+parseQs(qs);
++//+ADD+SOME+CODE+HERE+TO+LOAD+YOUR+PAGE+ELEMS+AS+PER+q+!!
++//+YOU+SHOULD+CATER+FOR+EACH+hashQuery+ATTRS+COMBINATION
++//++THAT+IS+PASSED+TO+changeHashValue(hashQuery)
}

//+CALL+THIS+FROM+YOUR+AJAX+LOAD+CODE+EACH+LOAD+...
function+changeHashValue(hashQuery)
{
++stopHashListener();
++hashValue+++++=+hashQuery;
++location.hash+=+hashQuery;
++startHashListener();
}

//+AND+DONT+WORRY+ABOUT+ANYTHING+BELOW+...
function+checkIfHashChanged()
{
++var+hashQuery+=+getHashQuery();
++if+(hashQuery+==+hashValue)
++++return;
++hashValue+=+hashQuery;
++locationHashChanged(hashQuery);
}

function+parseQs(qs)
{
++var+q+=+{};
++var+pairs+=+qs.split('&');
++for+(var+idx+in+pairs)+{
++++var+arg+=+pairs[idx].split('=');
++++q[arg[0]]+=+arg[1];
++}
++return+q;
}

function+startHashListener()
{
++hashListener+=+setInterval(checkIfHashChanged,+1000);
}

function+stopHashListener()
{
++if+(hashListener+!=+null)
++++clearInterval(hashListener);
++hashListener+=+null;
}

function+getHashQuery()
{
++return+location.hash.replace(/%5E#/,+'');
}

var+hashListener+=+null;
var+hashValue++++=+'';//getHashQuery();
startHashListener();|code-block|syntax|javascript|1512715|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 do the following, if you want to use it then paste it in some where and set your handler code in locationHashChanged(qs) where commented, and then call changeHashValue(hashQuery) every time you load an ajax request. 
Its not a quick-fix answer and there are none, so you will need to think about it and pass sensible hashQuery args (ie a=1&amp;b=2) to changeHashValue(hashQuery) and then cater for each combination of said args in your locationHashChanged(qs) callback ...

<pre><code>// Add code below ...
function locationHashChanged(qs)
{
 var q = parseQs(qs);
 // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !!
 // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION
 // THAT IS PASSED TO changeHashValue(hashQuery)
}

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ...
function changeHashValue(hashQuery)
{
 stopHashListener();
 hashValue = hashQuery;
 location.hash = hashQuery;
 startHashListener();
}

// AND DONT WORRY ABOUT ANYTHING BELOW ...
function checkIfHashChanged()
{
 var hashQuery = getHashQuery();
 if (hashQuery == hashValue)
 return;
 hashValue = hashQuery;
 locationHashChanged(hashQuery);
}

function parseQs(qs)
{
 var q = {};
 var pairs = qs.split('&amp;');
 for (var idx in pairs) {
 var arg = pairs[idx].split('=');
 q[arg[0]] = arg[1];
 }
 return q;
}

function startHashListener()
{
 hashListener = setInterval(checkIfHashChanged, 1000);
}

function stopHashListener()
{
 if (hashListener != null)
 clearInterval(hashListener);
 hashListener = null;
}

function getHashQuery()
{
 return location.hash.replace(/^#/, '');
}

var hashListener = null;
var hashValue = '';//getHashQuery();
startHashListener();
</code></pre>

blocks|key|1512751|text|尝试简单轻量级的PathJS库。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1512752|简单的例子：|1512753|Path.map("#/page").to(function(){
++++alert('page!');
});|code-block|syntax|javascript|1512754|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mtrpcic/pathjs^0|8|6|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|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Try simple &amp; lightweight <a href="https://github.com/mtrpcic/pathjs" rel="nofollow">PathJS</a> lib.

Simple example:

<pre><code>Path.map("#/page").to(function(){
 alert('page!');
});
</code></pre>

blocks|key|1727888|text|这里的答案都很陈旧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1727889|在HTML5世界中，您应该使用onpopstate事件。|offset|length|style|CODE|1727890|window.onpopstate+=+function(event)
{
++++alert("location:+"+%2B+document.location+%2B+",+state:+"+%2B+JSON.stringify(event.state));
};|code-block|syntax|javascript|1727891|或者：|1727892|window.addEventListener('popstate',+function(event)
{
++++alert("location:+"+%2B+document.location+%2B+",+state:+"+%2B+JSON.stringify(event.state));
});|1727893|后一段代码允许存在多个事件处理程序，而前者将替换任何可能导致难以找到的bug的现有处理程序。|1727894|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate^0|0|F|A|F|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

The answers here are all quite old.

In the HTML5 world, you should the use <a href="https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate" rel="noreferrer"><code>onpopstate</code></a> event.

<pre><code>window.onpopstate = function(event)
{
 alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
</code></pre>

Or:

<pre><code>window.addEventListener('popstate', function(event)
{
 alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
</code></pre>

The latter snippet allows multiple event handlers to exist, whereas the former will replace any existing handler which may cause hard-to-find bugs.

I just set up my new homepage at <a href="http://ritter.vg" rel="noreferrer">http://ritter.vg</a>. I'm using jQuery, but very minimally. 
It loads all the pages using AJAX - I have it set up to allow bookmarking by detecting the hash in the URL. 

<pre><code> //general functions
 function getUrl(u) {
 return u + '.html';
 }
 function loadURL(u) {
 $.get(getUrl(u), function(r){
 $('#main').html(r);
 }
 );
 }
 //allows bookmarking
 var hash = new String(document.location).indexOf("#");
 if(hash &gt; 0)
 {
 page = new String(document.location).substring(hash + 1);
 if(page.length &gt; 1)
 loadURL(page);
 else
 loadURL('news');
 }
 else
 loadURL('news');
</code></pre>

But I can't get the back and forward buttons to work. 

Is there a way to detect when the back button has been pressed (or detect when the hash changes) without using a setInterval loop? When I tried those with .2 and 1 second timeouts, it pegged my CPU.

Detecting Back Button/Hash Change in URL

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚刚在上建立了我的新主页。我使用的是jQuery，但使用的非常少。它使用AJAX加载所有页面-我将其设置为允许通过检测URL中的散列来添加书签。 //general functions function getUrl(u) {      return u + '.html'; } function loadURL(u...

问检测URL中的Back Button/Hash更改
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测URL中的Back Button/Hash更改EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测URL中的Back Button/Hash更改
EN