基于js判断浏览器是否支持webGL


Posted in Javascript onApril 18, 2020

起因是我之前开发的网页,用到了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的代码放入其中,即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
Vue通过input筛选数据
Oct 26 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
js实现扫雷源代码
Nov 27 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 #Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 #Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 #Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 #Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python访问抓取网页常用命令总结
2017/04/11 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
初二生物教学反思
2014/02/03 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
2014年实验室工作总结
2014/12/03 职场文书
学雷锋倡议书
2015/01/19 职场文书
分家协议书范本
2016/03/22 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书