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

Keycode对照表

字母和数字键的键码值(keyCode)
按键键码按键键码按键键码按键键码
A65J74S83149
B66K75T84250
C67L76U85351
D68M77V86452
E69N78W87553
F70O79X88654
G71P80Y89755
H72Q81Z90856
I73R82048957
数字键盘上的键的键码值(keyCode)功能键键码值(keyCode)
按键键码按键键码按键键码按键键码
0968104F1112F7118
1979105F2113F8119
298*106F3114F9120
399+107F4115F10121
4100Enter108F5116F11122
5101109F6117F12123
6102.110
7103/111
控制键键码值(keyCode)
按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Dw Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{219
Control17Home36;:186\|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188‘”222
多媒体键码值(keyCode)
按键键码按键键码按键键码按键键码
音量加175
音量减174
停止179
静音173
浏览器172
邮件180
搜索170
收藏171

 

 

Canvas灰度图

var context = canvas.get(0).getContext("2d");
var offlineImg = context.getImageData(0,0,40,40);
var pix = offlineImg.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
	var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
	pix[i] = pix[i+1] = pix[i+2] = grayscale;
}
context.putImageData(offlineImg,0,0);

 

IFrame 跨域自动高

先说一下不跨域的autoheight解决方案:iframe里

window.parent.frames[“frameId”].height=document.documentElement.scrollHeight

就可以。

如果跨域的话可以获取到window.parent这个对象,但是获取不到其他的对象,因为跨域。

但是可以这样解决:

在iframe里面再插入一个iframe,这个iframe是和最外层的同域的,即:

aaa.com/index.html – > bbb.com/iframe.html -> aaa.com/agent.html。

这个agent中可以用window.parent.parent来做上面提到的没有跨域做的那些事。

但是agent里也没有办法获取到他的parent即iframe.html的高。

解决办法是用js创建这个agent iframe,创建时将网页的高度作为参数穿进去如agent.html?height=800,agent里再根据这个参数设parent.parent