ios版QQ中锚点和hashchange的BUG

问题

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

发表回复

您的电子邮箱地址不会被公开。