js判断浏览器是否支持webGL
起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果。
在各种浏览器上运行都没问题,在IE上也做了兼容代码。
但是今天接电话,老板说你这网页在xp上不显示啊。IE上好使。google浏览器不好使。
于是开始解决问题,不禁陷入了沉思。what?网页显示难道还与操作系统有关?google竟然不好使?
于是搭建一个xp虚拟机。
于是下载一个chorme。
惊奇的发现并不能安装最新版本的chrome。
哦?一定是xp上安装的低版本chrome而那时候的chrome还不支持webGL。这个坑啊。
于是机智的我打算获取谷歌版本,低版本的话不执行那段js。于是如下代码:
function getChromeVersion() {
var arr = navigator.userAgent.split(' ');
var chromeVersion = '';
for(var i=0;i < arr.length;i++){
if(/chrome/i.test(arr[i]))
chromeVersion = arr[i]
}
if(chromeVersion){
return Number(chromeVersion.split('/')[1].split('.')[0]);
} else {
return false;
}
}
这个可以返回谷歌浏览器的前两个号码。由此判断低版本,49为支持xp的最高版本。
本想美滋滋解决。又想起。我也不确定50以上全支持啊!!!
于是继续搞起,找一个让浏览器自己判断是否支持webGL的东西。
于是如下;
var Detector = {
canvas: !!window.CanvasRenderingContext2D,
webgl: (function() {
try {
var canvas = document.createElement('canvas');
return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
} catch(e) {
return false;
}
})(),
workers: !!window.Worker,
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
getWebGLErrorMessage: function() {
var element = 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 = '5em auto 0';
if(!this.webgl) {
element.innerHTML = window.WebGLRenderingContext ? [
'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" rel="external nofollow" rel="external nofollow" style="color:#000">WebGL</a>.<br />',
'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
].join('\n') : [
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" rel="external nofollow" rel="external nofollow" style="color:#000">WebGL</a>.<br/>',
'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
].join('\n');
}
return element;
},
addGetWebGLMessage: function(parameters) {
var parent, 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(typeof module === 'object') {
module.exports = Detector;
}
通过调用Detector.webgl,如果返回true为支持,false为不支持。
至此将three.js的代码放入其中,即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。
完美~。
js判断浏览器是否支持webGL的更多相关文章
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- js判断浏览器是否支持flash的方法
传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...
- JS判断浏览器是否支持某一个CSS3属性的方法
var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...
- JS判断浏览器是否支持触屏事件
var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...
- JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- 判断浏览器是否支持FileReader
1.js代码: //判断浏览器是否支持FileReader if (typeof FileReader == "undefined") { document.write(" ...
- js判断浏览器类型和版本
原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...
- Js 判断浏览器类型整理
判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...
- js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...
随机推荐
- GIS中的坐标系【Esri官方文档部分翻译】
GCS 地理坐标系(GCS)使用椭圆体表面来定义地球上的位置.地理坐标系有三个部分: 基准面,是地球的椭圆体(椭球体)模型 本初子午线 角度单位 常见基准包括WGS84(用于GPS)和NAD83(用于 ...
- Mac OS X中开启或关闭显示隐藏文件命令
前言:之前一直用的都是 windows 系统的电脑,刚接触 Mac ,很多功能都不熟悉,写下博客记录一下,以防以后忘记,也给后来者提供方便. 命令行方式:显示隐藏文件: defaults write ...
- DataPipeline丨瓜子二手车基于Kafka的结构化数据流
文 |彭超 瓜子大数据架构师 交流微信 | datapipeline2018 一.为什么选择Kafka 为什么选Kafka?鉴于庞大的数据量,需要将其做成分布式,这时需要将Q里面的数据分到许多机器 ...
- Windows Server 2016-启用默认Windows搜索服务
当我们使用Windows Server 2016尝试从开始菜单或基于Windows Server 2016的计算机上的Cortana 搜索时,我们不会收到任何结果或不一致的结果. 原因 默认情况下, ...
- 记录SoapUI使用说明
一.SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到E ...
- 一键解决更改计算机名后无法启动MSSQLSERVER服务问题
问题版本:SQL Server 2012. 解决办法:打开服务,Win + R运行services.msc,找到 SQL SERVER(MSSQLSERVER)服务右键->属性,切换至登录选项卡 ...
- Storm入门(十四)Trident API Overview
The core data model in Trident is the "Stream", processed as a series of batches. A stream ...
- eShopOnContainers 知多少[3]:Identity microservice
首先感谢晓晨Master和EdisonChou的审稿!也感谢正在阅读的您! 引言 通常,服务所公开的资源和 API 必须仅限受信任的特定用户和客户端访问.那进行 API 级别信任决策的第一步就是身份认 ...
- 我的2018OKR年终回顾与2019OKR初步规划
转眼一年又过去了,在这个年底的时候,按照国际惯例,又到了重新回顾审视一下这一年来的得失,规划一下明年的奋斗方向的时候了.因此,我继续使用OKR来给自己做Review和Planning,也希望自己能够保 ...
- eclipse升级Android SDK Tool版本到25.2.5后运行项目报错Unable to build: the file dx.jar was not loaded from the SDK folder
概述 由于最近通过SDK-Manager更新了build-tools,当要用到dx.jar这个包时,自动调用最新版本Android SDK build-tools中dx.jar,但是运行android ...