基于js判斷瀏覽器是否支持webGL

更新時間：2020年04月18日 14:01:25 作者：經(jīng)典雞翅

這篇文章主要介紹了基于js判斷瀏覽器是否支持webGL,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

起因是我之前開發(fā)的網(wǎng)頁，用到了three.js制作了一個3d的旋轉(zhuǎn)球體效果。

在各種瀏覽器上運(yùn)行都沒問題，在IE上也做了兼容代碼。

但是今天接電話，老板說你這網(wǎng)頁在xp上不顯示啊。IE上好使。google瀏覽器不好使。

于是開始解決問題，不禁陷入了沉思。what?網(wǎng)頁顯示難道還與操作系統(tǒng)有關(guān)？google竟然不好使？

于是搭建一個xp虛擬機(jī)。

于是下載一個chorme。

驚奇的發(fā)現(xiàn)并不能安裝最新版本的chrome。

哦？一定是xp上安裝的低版本chrome而那時候的chrome還不支持webGL。這個坑啊。

于是機(jī)智的我打算獲取谷歌版本，低版本的話不執(zhí)行那段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以上全支持?。。。?/p>

于是繼續(xù)搞起，找一個讓瀏覽器自己判斷是否支持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  rel="external nofollow" rel="external nofollow"  style="color:#000">WebGL</a>.<br />',
        'Find out how to get it <a  rel="external nofollow" rel="external nofollow"  style="color:#000">here</a>.'
      ].join('\n') : [
        'Your browser does not seem to support <a  rel="external nofollow" rel="external nofollow"  style="color:#000">WebGL</a>.<br/>',
        'Find out how to get it <a  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;
}

通過調(diào)用Detector.webgl，如果返回true為支持，false為不支持。

至此將three.js的代碼放入其中，即可由瀏覽器自己判斷是否支持。如果支持就執(zhí)行。不支持就不執(zhí)行。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: