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

2024-12-24 03:21:52

起因是我之前开发的网页，用到了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的代码放入其中，即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

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

Nodejs + Websocket 指定发送及群聊的实现

目的通过nodejs + ws (Websocket) 实现点对点发送及群聊发送项目搭建直接跳过,这里列举一下用到的插件 yarn add ws WebSocket 话不多说,直接上码对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用, webSocket 点对点也好,群聊也好,主要是用到一个方法 clients 它的作用就是存储了连接, 我们可以通过对每一个连接增加标识,然后根据接收到的信息进行解
Android webview注入JS代码修改网页内容操作

今天开发的时候遇到一个需求,就是需要隐藏webview的元素,鼓捣了半天在stack overFlow找到了解决办法在此记录一下 final WebView webview = (WebView)findViewById(R.id.browser); webview.getSettings().setJavaScriptEnabled(true); webview.setWebViewClient(new WebViewClient() { @Override public void onP
no-vnc和node.js实现web远程桌面的完整步骤

引言项目需求,要求在浏览器端进行远程桌面的访问,如图所示: 实现远程桌面,需要依赖VNC协议: VNC(Virtual Network Computing),为一种使用RFB协议的屏幕画面分享及远程操作软件.此软件借由网络,可发送键盘与鼠标的动作及即时的屏幕画面. 相关的参考比较少,去谷歌搜索出来的文章大多都是如何使用客户端进行VNC的搭建与访问,很少有将其内嵌到web里的,腾讯云有相关的功能,但因为业务安全性,咱也看不着人家咋实现的. 再见,百度.用百度查了一次之后,我才知道原来VNC是口红
NodeJS http模块用法示例【创建web服务器/客户端】

本文实例讲述了NodeJS http模块用法.分享给大家供大家参考,具体如下: Node.js提供了http模块,用于搭建HTTP服务端和客户端. 创建Web服务器 /** * node-http 服务端 */ let http = require('http'); let url = require('url'); let fs = require('fs'); // 创建服务器 let server = http.createServer((req, res) => { // 解析请求 le
在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式的方法

介绍你需要将SVG文件转换为PNG.JPEG.TIFF.WEBP 和 HEIF 格式吗?本文将指导你如何转换为所有这些类型的格式. 我们将使用 Node.js 和Sharpnpm 包来完成大部分繁重的工作. 目录安装 Sharp Npm 包 SVG 转 PNG SVG 转 JPEG SVG 转 TIFF SVG 转 WEBP SVG 转 HEIF 安装Sharp Npm Package 首先你需要安装 npm 包.你可以使用下面的 npm 或 yarn 命令安装: Npm $ npm ins
php实现JWT(json web token)鉴权实例详解

JWT是什么 JWT是json web token缩写.它将用户信息加密到token里,服务器不保存任何用户信息.服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证.基于token的身份验证可以替代传统的cookie+session身份验证方法. JWT由三个部分组成:header.payload.signature 以下示例以JWT官网为例 header部分: { "alg": "HS256", "typ": "JWT
基于js判断浏览器是否支持webGL

起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果. 在各种浏览器上运行都没问题,在IE上也做了兼容代码. 但是今天接电话,老板说你这网页在xp上不显示啊.IE上好使.google浏览器不好使. 于是开始解决问题,不禁陷入了沉思.what?网页显示难道还与操作系统有关?google竟然不好使? 于是搭建一个xp虚拟机. 于是下载一个chorme. 惊奇的发现并不能安装最新版本的chrome. 哦?一定是xp上安装的低版本chrome而那时候的chrome还不支持webGL
如何基于js判断浏览器版本

这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下浏览器类型判断不考虑对 IE9 以下浏览器的判断 function getBrowserType(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var browser='unknown'; if (userAgent.indexOf("IE")!=-1) { brow
js判断浏览器是否支持严格模式的方法

设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度: - 为未来新版本的Javascript做好铺垫. "严格模式"体现了Javascript更合理.更安全.更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它. 另一方面,同样的代码,在"严格模式"中
JS判断浏览器是否支持某一个CSS3属性的方法

1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 2.检测方法下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @
js判断浏览器是否支持html5

现在HTML5似乎慢慢流行起来了,有些前端高手为了兼容考虑,会在网页中添加对客户端浏览器判断的代码,知道用户浏览器是否支持HTML5,下面分享想我自己使用的2种方法方法一, <script> function checkhHtml5() { if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert("不支持HTML5"); } } </scri
JavaScript 判断浏览器是否支持SVG的代码

可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是一个开放标准.另SVG还是Static Var Generator静止无功发生器的简称判断浏览器是否支持SVG的代码(部分截去自Highcharts源码): Js代码: 复制代码代码如下: function hasSVG(){ SVG_NS = 'http://www.w3.org/2000/svg', return !!doc.
JS判断浏览器是否安装flash插件的简单方法

1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })(); chrome: Edge浏览器中取消了wind
js判断浏览器的环境（pc端，移动端，还是微信浏览器）

今天突然看到一段很好的代码,分享给大家,顺便也给自己留个笔记,js判断浏览器的环境具体如下: 方法一: // 判断浏览器函数 function isMobile(){ if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|W
基于JS判断对象是否是数组

这篇文章主要介绍了基于JS判断对象是否是数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值. let a = []; a instanceof Array; //true let b = {}; b instanceof Array; //false 在上方代码中,instanceof运算符检测
JS判断浏览器类型与操作系统的方法分析

本文实例讲述了JS判断浏览器类型与操作系统的方法.分享给大家供大家参考,具体如下: navigator.userAgent : userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. navigator.platform : platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台. 判断浏览器类型 IE浏览器 ie = ua.match( /MSIE\s([\d\.]+)/ ) || ua.match( /(?:trident

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

相关推荐

随机推荐