问题
QQ版本:5.6 for iPhone
首先是这样一段代码,正常情况下点击A标签location的hash会变成#one,并触发hashchange事件,页面不会刷新。
再执行history.back()或点击浏览器的后退按钮时,会再次触发hashchange事件,页面也不会刷新
<a href="#one">test</a> <script> window.onhashchange = function() { alert('onhashchange'); } </script>
但是在ios的QQ中点击A标签会刷新页面后条转到#one处,不会触发hashchange事件。
再执行history.back()或点击浏览器的后退按钮时,同样不会触发hashchange事件,并且是以重新加载页面的方式返回的。
感觉在ios的QQ中锚点链接被当成了普通链接进行处理了。
尝试解决
然后稍微做了一些调整,将href=”#one”改成了通过js执行location.hash=”#one”。
<a href="javascript:void(0);" onclick="location.hash='#one'">test</a> <script> window.onhashchange = function() { alert('onhashchange'); } </script>
这么写之后点击a标签页面不会刷新了,location.hash也变成了#one,但是却没有触发hashchange事件。
最终解决
改用popstate事件,不知道为什么在ios的QQ中onload的时候会触发popstate事件,history.back时也会触发这个事件。
<a href="javascript:void(0);" onclick="location.hash='#one'">test</a> <script> function test() { alert('onhashchange or onpopstate') } if(/iPhone\sOS.*QQ[^B]/.test(navigator.userAgent)) { window.onpopstate = test; } else { window.onhashchange = test; } </script>
用正则判断了一下userAgent,如果是在ios的QQ中就使用popstate,其它情况还是用hashchange