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

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

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

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

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

于是下載一個(gè)chorme。

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

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

于是機(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; } }

這個(gè)可以返回谷歌瀏覽器的前兩個(gè)號碼。由此判斷低版本，49為支持xp的最高版本。

本想美滋滋解決。又想起。我也不確定50以上全支持啊！！！

于是繼續(xù)搞起，找一個(gè)讓瀏覽器自己判斷是否支持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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。