基于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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
jquery滚动特效集锦
Jun 03 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
JS实现滑动导航效果
Jan 14 Javascript
js实现点赞效果
Mar 16 Javascript
js实现点击烟花特效
Oct 14 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连接SQLServer2005方法及代码
2013/12/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python的requests网络编程包使用教程
2016/07/11 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python奇偶行分开存储实现代码
2018/03/19 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
浅析Python面向对象编程
2020/07/10 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
激励员工的口号
2014/06/16 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python