js 기반 웹 브 라 우 저 지원 여부 판단
각종 브 라 우 저 에서 실행 해도 괜 찮 고 IE 에서 도 호 환 코드 를 만 들 었 습 니 다.
그런데 오늘 전 화 를 받 았 는데 사장 님 께 서 이 홈 페이지 가 xp 에 표시 되 지 않 는 다 고 하 셨 어 요.IE 가 좋다.구 글 브 라 우 저가 잘 안 돼 요.
그래서 문 제 를 해결 하기 시 작 했 고 생각 에 잠 겼 습 니 다.what?웹 페이지 표시 가 운영 체제 와 도 관련 이 있 습 니까?구 글 이 안 돼?
그래서 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 이상 이 전부 지지 하 는 지 확실 하지 않 아!!!
그래서 계속해서 웹 브 라 우 저가 웹 GL 을 지원 하 는 지 여 부 를 스스로 판단 할 수 있 는 것 을 찾 았 다.
그래서 다음 과 같다.
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('
') : [
'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('
');
}
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 코드 를 넣 으 면 브 라 우 저가 지원 여 부 를 스스로 판단 할 수 있 습 니 다.지원 하면 실행 해.지원 하지 않 으 면 실행 하지 않 는 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.