起因是我之前開發的網頁，用到了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 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;}

通過調用Detector.webgl，如果返回true為支持，false為不支持。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。