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

 更新时间:2020年04月18日 14:01:25   作者:经典鸡翅  
这篇文章主要介绍了基于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的代码放入其中,即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

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

相关文章

  • JavaScript与DropDownList 区别分析

    JavaScript与DropDownList 区别分析

    大家都知道,.NET中一些Web服务器控件解析并编译,最终被渲染的时候,其实是转化成了普通的html控件。
    2010-01-01
  • 微信小程序实现tab和swiper切换结合效果

    微信小程序实现tab和swiper切换结合效果

    这篇文章主要为大家详细介绍了微信小程序实现tab和swiper切换结合效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 用Javascript获取页面元素的具体位置

    用Javascript获取页面元素的具体位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置,在接下来的文章中为大家介绍下使用js是如何实现的
    2013-12-12
  • JavaScript 模块化详解

    JavaScript 模块化详解

    这篇文章主要介绍了JavaScript 模块化详解,块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信,下面一起进入文章来接更多详细内容
    2021-12-12
  • javascript DOM操作之动态删除TABLE多行

    javascript DOM操作之动态删除TABLE多行

    DOM动态删除TABLE tr行的实现代码,需要的朋友可以参考下。
    2009-12-12
  • js中Generator函数的深入讲解

    js中Generator函数的深入讲解

    这篇文章主要给大家介绍了关于js中Generator函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 详解A标签中href=

    详解A标签中href=""的几种用法

    这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下
    2017-08-08
  • LayUI表格批量删除方法

    LayUI表格批量删除方法

    今天小编就为大家分享一篇LayUI表格批量删除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Javascript 实现计算器时间功能详解及实例(二)

    Javascript 实现计算器时间功能详解及实例(二)

    这篇文章主要介绍了Javascript 实现计算器时间功能详解及实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • 轻松理解Javascript变量的相关问题

    轻松理解Javascript变量的相关问题

    这篇文章主要给大家介绍了关于Javascript变量的相关问题,文中给出了详细的介绍和示例代码,相信对大家的理解和学习具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
    2017-01-01

最新评论