基于js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。
在各种浏览器上运行都没问题，在IE上也做了兼容代码。
但是今天接电话，老板说你这网页在xp上不显示啊。IE上好使。google浏览器不好使。
于是开始解决问题，不禁陷入了沉思。what?网页显示难道还与操作系统有关？google竟然不好使？
于是搭建一个xp虚拟机。
于是下载一个chorme。
惊奇的发现并不能安装最新版本的chrome。
哦？一定是xp上安装的低版本chrome而那时候的chrome还不支持webGL。这个坑啊。
于是机智的我打算获取谷歌版本，低版本的话不执行那段js。于是如下代码：
functiongetChromeVersion(){
vararr=navigator.userAgent.split('');
varchromeVersion='';
for(vari=0;i
这个可以返回谷歌浏览器的前两个号码。由此判断低版本，49为支持xp的最高版本。
本想美滋滋解决。又想起。我也不确定50以上全支持啊！！！
于是继续搞起，找一个让浏览器自己判断是否支持webGL的东西。
于是如下;
varDetector={
canvas:!!window.CanvasRenderingContext2D,
webgl:(function(){
try{
varcanvas=document.createElement('canvas');
return!!(window.WebGLRenderingContext&&(canvas.getContext('webgl')||canvas.getContext('experimental-webgl')));
}catch(e){
returnfalse;
}
})(),
workers:!!window.Worker,
fileapi:window.File&&window.FileReader&&window.FileList&&window.Blob,
getWebGLErrorMessage:function(){
varelement=document.createElement('div');
element.id='webgl-error-message';
element.style.fontFamily='monospace';
element.style.fontSize='13px';
element.style.fontWeight='normal';
element.style.textAlign='center';
element.style.background='#fff';
element.style.color='#000';
element.style.padding='1.5em';
element.style.width='400px';
element.style.margin='5emauto0';
if(!this.webgl){
element.innerHTML=window.WebGLRenderingContext?[
'YourgraphicscarddoesnotseemtosupportWebGL.
',
'Findouthowtogetithere.'
].join('\n'):[
'YourbrowserdoesnotseemtosupportWebGL.
',
'Findouthowtogetithere.'
].join('\n');
}
returnelement;
},
addGetWebGLMessage:function(parameters){
varparent,id,element;
parameters=parameters||{};
parent=parameters.parent!==undefined?parameters.parent:document.body;
id=parameters.id!==undefined?parameters.id:'oldie';
element=Detector.getWebGLErrorMessage();
element.id=id;
parent.appendChild(element);
}
};
if(typeofmodule==='object'){
module.exports=Detector;
}
通过调用Detector.webgl，如果返回true为支持，false为不支持。
至此将three.js的代码放入其中，即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。