基于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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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 面向对象实现代码
2009/11/11 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
js+css3实现简单时钟特效
2020/09/13 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python文件操作的简单方法总结
2019/11/07 Python
Django用户身份验证完成示例代码
2020/04/03 Python
python中setuptools的作用是什么
2020/06/19 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
小学开学典礼主持词
2014/03/19 职场文书
岗位竞聘书范文
2014/03/31 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python