All posts in HTML5

ios版QQ中锚点和hashchange的BUG

By Fyn on Leave a Comment

问题

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

base64透明图

By Fyn on Leave a Comment

1:1 (640×640)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

2:1 (640×320)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAMAAADD/I+4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAA1JREFUeNpiYGAACDAAAAMAAdNjUbYAAAAASUVORK5CYII=

16:9 (640×360)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=

5:3 (600×360)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAMAAABs6DXKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAA5JREFUeNpiYEAHAAEGAAASAAGzTHsVAAAAAElFTkSuQmCC

64:15 (640×150)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAPAQMAAABuqVskAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjGBwAAACHAAGSlBfhAAAAAElFTkSuQmCC

32:15 (640×300)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAPAQMAAAC/Tl9UAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjoB4AAABLAAGYraT+AAAAAElFTkSuQmCC

64:45 (640×450)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAtAQMAAAAkzf8ZAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUGNNjGAWDDwAAAZUAAS+WdwMAAAAASUVORK5CYII=

Canvas灰度图

By Fyn on Leave a Comment
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);