saber 酱的抱枕

Fly me to the moon

05/26
2017
学习

使用html5media视频解决方案支援IE8的视频播放

saber 撰写 10条回复 6,324次查看

现代浏览器都支持html5的video标签，在网页中插入视频和播放视频都变得非常简单。但是要兼容IE8的话则比较麻烦，因为IE8不支持video标签，还得使用flash播放器来播放视频。难道因为IE8的拖累，我就只能使用flash播放器了吗？

当然不是，理想的解决方案是在现代浏览器上使用原生video标签，在低版本IE浏览器上使用flash播放器。html5media就是这样一个视频解决方案，我们只需要写标准的video标签就行了。在低版本IE浏览器里，html5media会自动调用flowplayer这个flash播放器进行处理，非常的方便。

html5media github地址

使用步骤：

1.下载html5media的压缩包，然后找到dist→api文件夹，把要使用的api文件夹复制到项目文件夹里。

flash flowplayer html5 html5media javascript js video 播放视频 IE8浏览器 兼容性

2.在网页上引用html5media的js文件：

<!--[if lt IE 9]>
<script src="path/html5media.min.js"></script>
<![endif]-->

这样，在IE8及更低版本的浏览器里，就会引入html5media的js文件了。

再次提醒：要复制使用的api的整个文件夹，包括里面的几个swf文件，不然IE8里就歇菜了。

3.设置video标签。

<video src="/f/nico.flv"  width="720" height="405" poster="/f/nico_poster.jpg" controls preload="meta"></video>

这样就完成了。
Read More →

使用html5media视频解决方案支援IE8的视频播放

11/19
2016
学习

IE8的兼容性问题

saber 撰写 11条回复 2,801次查看

浏览器份额

IE8无疑是个坑爹货，但XP上的IE最高只到IE8。根据百度统计流量研究院的数据，目前IE8在国内仍然占有15%的份额（不过这个图上的数据看得我怀疑人生）。

IE8的兼容性也是一个大坑。最近做一个网站，想要兼容IE8，于是翻出了许多遇到过和没遇到过的坑，略微整理一下。
Read More →

IE8的兼容性问题

11/16
2016
学习

在低版本IE浏览器上实现getElementsByClassName()方法

saber 撰写 7条回复 4,807次查看

javascript中的document.getElementsByClassName()方法是很实用也很常见的DOM选择器方法，然而IE8及以下版本的IE浏览器并不支持此方法（IE8都支持querySelector()方法了，却不支持getElementsByClassName()方法，实在匪夷所思）。

下面的代码可以在低版本IE浏览器中实现一个document.getElementsByClassName()方法。

if (!document.getElementsByClassName) {
	document.getElementsByClassName = function(className, element) {
		var children = (element || document).getElementsByTagName('*');
		var elements = new Array();
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	};
}

加入这份代码之后，就可以正常使用document.getElementsByClassName()方法了。

（也许遍历所有HTML标签开销比较大←_← 只要求兼容到IE8的话尽情的使用querySelector()方法和querySelectorAll()方法吧)

在低版本IE浏览器上实现getElementsByClassName()方法

10/19
2016
学习

JavaScript停止事件冒泡以及阻止浏览器默认行为

saber 撰写 3条回复 1,838次查看

原生JavaScript写法附带兼容性处理：

if (!!window.attachEvent) {	//区分浏览器指派事件
	document.getElementById("a").attachEvent("onclick",fun,false);
}else{
	document.querySelector("#a").addEventListener("click",fun,false);
}
function fun (event) {
	//处理event对象的兼容性
	var e=event||window.event;	//firefox里的event是临时的，不是window下的全局变量
	//停止事件冒泡
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;	//低版本ie使用cancelBubble属性，其他浏览器使用stopPropagation方法
	//阻止浏览器默认行为
	e.preventDefault?e.preventDefault():e.returnValue = false;	//低版本ie设置returnValue属性，其他浏览器使用preventDefault方法
}

IE8及更低版本的IE，添加事件要使用私有的attachEvent()，也不支持stopPropagation()和preventDefault()，真是毒瘤啊。

如果使用jQuery的话，写起来更加方便，因为jQuery已经做了兼容性处理，我们用w3c标准方法就行了：

$("a").click(function (e) {
    e.stopPropagation(); //停止事件冒泡
    e.preventDefault(); //阻止浏览器默认行为
    return false; //同时停止冒泡和阻止默认行为。
});

注意，jQuery中的return false和原生JavaScript里的return false是有区别的：
原生JavaScript中的return false不会停止冒泡，只会阻止默认行为。但jQuery中的return false会同时停止冒泡和阻止默认行为。

JavaScript停止事件冒泡以及阻止浏览器默认行为