天道酬勤,学无止境

Any way of detecting whether a browsers console is able to render colors?

Is there a way of checking to see if a browser is capable of using console colors without sniffing?

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

For example that in chrome 26+ and firebug will print colored output.

评论

This is one of these few cases where browser version detection seems the valid way to go. To minimize the dangers of this approach make sure to use a blacklist rather than a whitelist, no matter how unintuitive this might feel right now (to make sure you don't leave out new future browser as happened with a lot of old netscape focused code). I am aware that this isn't the answer you wanted to hear, but as console.log is a native function and it's effect can in no way be observed, so as far as I can see the only option is to do browser version detection.

I wrote Console.js https://github.com/icodeforlove/Console.js to allow us to do this a bit easier

Console.styles.register({
  red: 'color: red',
  underline: 'text-decoration: underline',
  bold: 'font-weight: bold'
});

then you can just do this

console.log('red text '.red + 'red underlined text'.red.underline + 'red bold text'.red.bold);

it will gracefully degrade like this

console.js example

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 找出Chrome控制台是否打开(Find out whether Chrome console is open)
    问题 我正在使用这个小脚本来查找Firebug是否打开: if (window.console && window.console.firebug) { //is open }; 而且效果很好。 现在,我正在搜索半小时,以找到一种方法来检测Google Chrome的内置Web开发人员控制台是否已打开,但找不到任何提示。 这个: if (window.console && window.console.chrome) { //is open }; 不起作用。 编辑: 因此,似乎无法检测到Chrome控制台是否处于打开状态。 但是有一个“ hack”有效,但有一些缺点: 控制台断开连接后将无法工作在页面加载中打开控制台时将不起作用 因此,我现在选择Unsigned的答案,但是如果some1提出了一个绝妙的主意,欢迎他继续回答,我将更改选择的答案! 谢谢! 回答1 requestAnimationFrame(2019年末) 这些先前的答案留在这里作为历史背景。 目前,穆罕默德·乌默尔(Muhammad Umer)的方法可在Chrome 78上运行,并具有检测关闭事件和打开事件的附加优点。 函数toString(2019) 感谢Overcl9ck对这个答案的评论。 用空函数对象替换正则表达式/./仍然有效。 var devtools = function() {}; devtools
  • 如何使用 JavaScript 检测 CSS 变量支持?(How can I detect CSS Variable support with JavaScript?)
    问题 最新版本的 Firefox 支持 CSS 变量,但 Chrome、IE 和其他浏览器的负载不支持。 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能,但我目前找不到任何可以执行此操作的方法。 我需要的是一个解决方案,如果浏览器不支持该功能,我可以将其用作运行代码的条件,例如: if (!browserCanUseCssVariables()) { // Do stuff... } 回答1 我们可以用 CSS.supports 做到这一点。 这是 CSS 的@supports规则的 JavaScript 实现,目前在 Firefox、Chrome、Opera 和 Android 浏览器中可用(请参阅 Can I Use...)。 CSS.supports()静态方法返回一个布尔值,指示浏览器是否支持给定的 CSS 功能。 – Mozilla 开发者网络 有了这个,我们可以简单地: CSS.supports('color', 'var(--fake-var)'); 如果浏览器支持 CSS 变量,则结果为true否则为false 。 (您可能认为CSS.supports('--fake-var', 0)会起作用,但正如对此答案的评论中所述,Safari 似乎有一个错误导致它失败。) 纯 JavaScript 示例 在 Firefox 上,此代码片段将产生绿色背景
  • 最大尺寸元素(Maximum size of a <canvas> element)
    问题 我正在使用一个高度为600至1000像素,宽度为数万或数十万像素的canvas元素。 但是,经过一定数量的像素(显然是未知的)之后,画布不再显示我使用JS绘制的形状。 有谁知道是否有限制? 在Chrome 12和Firefox 4中都进行了测试。 回答1 2014年10月13日更新 所有经过测试的浏览器都限制了canvas元素的高度/宽度,但是许多浏览器也限制了canvas元素的总面积。 对于我可以测试的浏览器,限制如下: 铬合金: 最大高度/宽度:32,767像素最大面积:268,435,456像素(例如16,384 x 16,384) Firefox: 最大高度/宽度:32,767像素最大面积:472,907,7​​76像素(例如22,528 x 20,992) IE: 最大高度/宽度:8,192像素最大面积:不适用 IE手机: 最大高度/宽度:4,096像素最大面积:不适用 其他: 我目前无法测试其他浏览器。 有关其他限制,请参阅此页面上的其他答案。 在大多数浏览器中,超过最大长度/宽度/面积会使画布无法使用。 (即使在可用区域中,它也会忽略任何绘制命令。)IE和IE Mobile将遵守可用空间中的所有绘制命令。 回答2 2018年更新: 随着时间的流逝,画布的局限性发生了变化。 可悲的是,没有改变的是,浏览器仍然无法通过Canvas API提供有关画布大小限制的信息。
  • 当以跨浏览器方式使用Javascript的DOMParser时,如何检测XML解析错误?(How do I detect XML parsing errors when using Javascript's DOMParser in a cross-browser way?)
    问题 似乎所有主流浏览器都实现了DOMParser API,以便可以将XML解析为DOM,然后使用XPath,getElementsByTagName等查询。 但是,检测解析错误似乎比较棘手。 DOMParser.prototype.parseFromString始终返回有效的DOM。 发生解析错误时,返回的DOM包含一个<parsererror>元素,但是在每个主要的浏览器中它都略有不同。 示例JavaScript: xmlText = '<root xmlns="http://default" xmlns:other="http://other"><child><otherr:grandchild/></child></root>'; parser = new DOMParser(); dom = parser.parseFromString(xmlText, 'application/xml'); console.log((new XMLSerializer()).serializeToString(dom)); Opera中的结果: DOM的根是<parsererror>元素。 <?xml version="1.0"?><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"
  • 如何对 CSS 过滤器进行特征检测?(How can I feature-detect CSS filters?)
    问题 在某些浏览器中,包括 Chrome 稳定版,您可以执行以下操作: h3 { -webkit-filter: grayscale(1); filter: grayscale(1); } 你不知道吗,h1 将完全以灰度呈现。 旧的一切又是新的。 无论如何 - 有没有人知道为此进行特征检测的任何方法? 如果filter不起作用,我需要能够应用其他样式。 回答1 所谓的更新答案: 正如 OP 提到的一个好点,我正在更新答案,但这与我之前的答案没有任何相关或矛盾,这只是浏览器检测。 Alan H. 在第 10 次之前提到了 IE。 版本,支持filter css 属性,但不是我们都知道的方式(我的意思是CSS3 filter )。 因此,如果我们只想检测CSS3 filter的功能,我们应该继续使用一点browser-detection 。 正如我在评论中提到的。 使用documentMode属性,并将其与我们简单的特征检测相结合,我们可以排除 IE 中所谓的误报。 function css3FilterFeatureDetect(enableWebkit) { //As I mentioned in my comments, the only render engine which truly supports //CSS3 filter is webkit. so here we
  • 前端知识总结1
    对浏览器内核的理解? 由2部分组成,分别是渲染引擎和js引擎渲染引擎:负责取得网页内容整理讯息,以及计算网页显示方式js引擎:解析和执行js来实现网页动态效果 h5新特性 新增了canvas video radio本地离线存储 localstoragesessionStorage浏览器关闭后自动删除新增一些语义化的标签article、footer、header、nav、section表单控件calendar date time email url search新的技术webworker websocket GeolocationIE8/IE7/IE6支持通过document.createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签浏览器支持新标签后,还需要添加标签默认的样式 webpack 打包效率: 开发环境采用增量构建,启用热更新开发环境不做无意义的工作例如提取css计算文件hash等配置devtool选择合适的loader个别loader开启cache如babel-loader第三方库采用引入方式提取公共代码优化构建时搜索路径 指明需要构建目录及不需要构建目录模块引入需要的部分 loader: loader就是一个node模块,它输出一个函数。当某种资源需要这个loader转换时 这个函数会被调用。并且
  • 可以检测元素的样式是否只是浏览器的默认样式,还是由样式表或内联样式设置?(Can one detect if an element's style is just the browser default vs. is set by a stylesheet or inline styles?)
    问题 我的 javascript 包含在 X 的站点中,但我对她的站点或包含它的站点没有任何其他控制权。 如果她的样式是#element ,我想#element会它,但如果她没有,我有一个样式表,我将在<head>注入。 有什么方法可以检测她是否有风格? 检查它的高度是 0 还是 1 失败,因为它有一些内容并且浏览器做出默认决定。 任何让 javascript/jquery/other 框架告诉样式的 CSS 特异性的方法都会回答这个问题并且令人难以置信。 回答1 对于内联样式,这很容易:您只需访问element.style对象并检查您想要的属性——或者使用element.hasAttribute('style')来检查该属性是否在 HTML 中定义。 对于样式表应用的 CSS 规则,我建议您查看“是否可以使用 Javascript 检查样式标签中是否定义了某些 CSS 属性?” 这与您要问的非常相似。 如果您想过滤掉任何通用规则(如标签规则),使用那里描述的方法也很容易过滤掉只有#element选择器的规则。 回答2 了解是否有意为元素设置样式的一种直接但不完美的方法是检查元素的style属性是否具有值或元素的class属性是否已设置。 http://jsfiddle.net/YbSpc/ HTML <div id="test_unstyled"></div> <div id=
  • 检测postMessage是否可以发送对象?(Detect whether postMessage can send objects?)
    问题 我正在寻找一种巧妙的方法来检测浏览器中的 postMessage 是否支持对象的发送和接收或仅支持字符串。 我想一定有人写了一些这样做的东西,但我还没有设法找到解决方案。 我正在使用 postMessage 向/从 WebWorker 发送数据。 虽然检测浏览器是否支持 worker 很简单,但检测对象是否可以通过 postMessage 发送被证明更加困难。 我想写一个简单的检测函数。 所以,如果浏览器支持发送对象来使用它。 如果只允许使用字符串,我可以回退到使用 JSON.stringify()。 我可能会将该功能分配给 dojo/has 测试(尽管这与问题/答案无关)。 其他人做了什么来解决这个问题? 任何建议都会很棒,我是 WebWorkers 和 postMessage 的新手。 提前致谢。 回答1 我找到了一种更简单的方法来检测 postMessage 是仅支持字符串还是支持其他类型。 只需在对象上添加自定义 toString 方法。 当尝试在 IE8 和 IE9 中使用 postMessage 发送对象时,它们将被转换为带有对象上的 toString 方法的字符串。 由于支持发送对象的浏览器不调用 toString 我们可以利用它来发挥我们的优势。 此测试不是异步的,因此您将立即获得结果。 尚未与网络工作者对此进行测试,但我想您可以使用相同的技术。 var
  • CSS/JavaScript/hacking: Detect :visited styling on a link *without* checking it directly OR do it faster than me
    This is for research purposes on http://cssfingerprint.com Consider the following code: <style> div.csshistory a { display: none; color: #00ff00;} div.csshistory a:visited { display: inline; color: #ff0000;} </style> <div id="batch" class="csshistory"> <a id="1" href="http://foo.com">anything you want here</a> <a id="2" href="http://bar.com">anything you want here</a> [etc * ~2000] </div> My goal is to detect whether foo has been rendered using the :visited styling. I want to detect whether foo.com is visited without directly looking at $('1').getComputedStyle (or in Internet Explorer
  • ReactJS 中的浏览器检测(Browser Detection in ReactJS)
    问题 有什么方法可以使用 React 检测 IE 浏览器并重定向到页面或提供任何有用的消息。 我在 JavaScript 中找到了一些东西,但不确定如何将它与 React+TypeScript 一起使用。 var isEdge = !isIE && !!window.StyleMedia; 回答1 您走在正确的轨道上,您可以使用这些来有条件地呈现 jsx 或帮助路由... 我已经成功地使用了以下内容。 最初来自 - 如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器? // Opera 8.0+ const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ const isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() ===
  • 是否有“元素渲染”事件?(Is there 'element rendered' event?)
    问题 我需要在Web应用程序中准确测量文本的尺寸,这是通过创建一个元素(具有相关的CSS类),设置其innerHTML并使用appendChild将其添加到容器中来实现的。 完成此操作后,需要等待offsetWidth才呈现该元素,并且可以读取其offsetWidth来确定文本的宽度。 目前,我正在使用setTimeout(processText, 100)等待渲染完成。 有没有我可以听的回调,或者是一种更可靠的方式来告知何时创建了我创建的元素? 回答1 当前没有DOM事件指示元素已被完全渲染(例如,已应用和绘制的附加CSS)。 这可能会使某些DOM操作代码返回错误或随机的结果(例如获取元素的高度)。 使用setTimeout为浏览器提供一些渲染开销是最简单的方法。 使用 setTimeout(function(){}, 0) 是最实用的方法,因为它会将您的代码放在活动浏览器事件队列的末尾,而没有任何更多延迟-换句话说,您的代码在渲染操作(以及当时发生的所有其他操作)之后立即排队。 回答2 可接受的答案是从2014年开始,现在已经过时。 setTimeout可能有效,但是它不是最干净的,并且不一定保证已将元素添加到DOM中。 从2018年开始,您应该使用MutationObserver来检测何时将元素添加到DOM。 现在,所有现代浏览器(Chrome 26 +,Firefox 14
  • 如何删除/忽略:将css样式悬停在触摸设备上(How to remove/ignore :hover css style on touch devices)
    问题 如果用户通过触摸设备访问我们的网站,我想忽略所有:hover CSS声明。 因为:hover CSS没有意义,而且如果平板电脑在单击/点击时触发它,甚至会令人不安,因为那样可能会一直停留到元素失去焦点为止。 老实说,我不知道为什么触摸设备首先需要触发:hover但这是现实,所以这个问题也是现实。 a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } 因此,在声明了触摸设备后,(如何)我可以立即删除/忽略触摸设备的所有CSS :hover声明(而不必知道每个)? 回答1 2020解决方案-仅CSS-无Javascript 将媒体悬停与媒体指针一起使用将帮助您解决此问题。 在chrome Web和android mobile上进行了测试。 我知道这个老问题,但没有找到这样的解决方案。 @media (hover: hover) and (pointer: fine) { a:hover { color: red; } } <a href="#" >Some Link</a> 回答2 tl; dr使用此:https://jsfiddle.net/57tmy8j3/ 如果您对为什么或有什么其他选择感兴趣,请继续阅读。 Quick'n'dirty-使用JS移除
  • 综合总结
    综合 谈⼀谈let与var的区别? 答: let 命令不存在变量提升,如果在 let 前使⽤,会导致报错 如果块区中存在 let 和 const 命令,就会形成封闭作⽤域 不允许重复声明,因此,不能在函数内部重新声明参数 如何通过JS判断⼀个数组? 答:instanceof ⽅法 instanceof 运算符是⽤来测试⼀个对象是否在其原型链原型构造函数的属性 var arr = []; arr instanceof Array; // true constructor ⽅法 constructor 属性返回对创建此对象的数组函数的引⽤,就是返回对象相对应的构造 函数 var arr = []; arr.constructor == Array; //true 最简单的⽅法 这种写法,是 jQuery 正在使⽤的 Object.prototype.toString.call(value) == '[object Array]' // 利⽤这个⽅法,可以写⼀个返回数据类型的⽅法 var isType = function (obj) { return Object.prototype.toString.call(obj).slice(8,-1); } ES5 新增⽅法 isArray() var a = new Array(123); var b = new Date()
  • 检查用户是否安装了Chrome扩展程序(Check whether user has a Chrome extension installed)
    问题 我正在构建Chrome扩展程序,为了使整个工作正常进行,我需要一个外部JavaScript脚本来检测用户是否安装了我的扩展程序。 例如:用户安装了我的插件,然后访问了带有我的脚本的网站。 该网站检测到我的扩展程序已安装,并相应地更新页面。 这可能吗? 回答1 我敢肯定,有一种直接方法(直接在扩展程序上调用函数,或通过使用JS类进行扩展),但是有一个间接方法(直到出现更好的情况): 让您的Chrome扩展程序在页面上查找具有特定ID的特定DIV或其他元素。 例如: <div id="ExtensionCheck_JamesEggersAwesomeExtension"></div> 执行一个getElementById并将innerHTML设置为扩展名或其他内容的版本号。 然后,您可以读取该客户端的内容。 同样,如果有可用的方法,则应使用直接方法。 编辑:找到直接方法! 使用此处找到的连接方法:https://developer.chrome.com/extensions/extension#global-events 未经测试,但您应该可以... var myPort=chrome.extension.connect('yourextensionid_qwerqweroijwefoijwef', some_object_to_send_on_connect); 回答2
  • 浏览器渲染原理及流程
    浏览器渲染原理及流程 大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给了前端直观的印象,因此对B/S架构的开发人员来说,熟悉浏览器的内部执行原理显得尤为重要。 1. 浏览器主要组成与浏览器线程 1.1 浏览器组件 浏览器大体上由以下几个组件组成,各个浏览器可能有一点不同。 界面控件 – 包括地址栏,前进后退,书签菜单等窗口上除了网页显示区域以外的部分 浏览器引擎 – 查询与操作渲染引擎的接口 渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML、CSS并将结果显示到窗口中 网络 – 用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现 UI后端 – 绘制基础元件,如组合框与窗口。它提供平台无关的接口,内部使用操作系统的相应实现 JS解释器 - 用于解析执行JavaScript代码 数据存储持久层 - 浏览器需要把所有数据存到硬盘上,如cookies。新的HTML5规范规定了一个完整(虽然轻量级)的浏览器中的数据库 web database 注意:chrome浏览器与其他浏览器不同,chrome使用多个渲染引擎实例,每个Tab页一个,即每个Tab都是一个独立进程。 1.2 浏览器中的进程与线程
  • 检测 Firefox 对屏幕共享的支持(Detect Firefox support for screen sharing)
    问题 Firefox 从 52 版开始,将通过以下方式支持屏幕共享: navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' }}) .then(stream => { ... }); 查看此测试页面以查看其实际效果。 我想知道是否有办法检测浏览器是否支持{ mediaSource: 'screen' } ? 我只想提供与具有共享能力的用户共享屏幕的选项。 所以我希望能够检测到这一点。 回答1 更新的答案: getDisplayMedia 现在是正确的屏幕共享 API,支持所有主要浏览器已有几年了(自 66 岁以上的 Firefox 中)。 所以正确的 API 是: await navigator.mediaDevices.getUserMedia({video: true}); 特征检测的正确方法是: console.log(navigator.mediaDevices && "getDisplayMedia" in navigator.mediaDevices); 这在缺乏支持的移动设备上是false (Android 版 Firefox 和 Android 版 Chrome)。 对于navigator.mediaDevices本身是undefined不安全的http (非 https
  • 使用JavaScript检测单个Unicode字符支持(Detecting individual Unicode character support with JavaScript)
    问题 是否可以检测客户端是否支持特定的Unicode字符,或者是否将其呈现为缺少的字形框? 重要提示:尽可能多的浏览器支持 不重要:效率,速度或优雅 我能想到的唯一方法是使用画布,因此我想在开始走这条路之前会先问问。 不能在公共网站上使用。 我只是试图编译每个浏览器支持的字符列表。 回答1 这比真正的答案更像是一个疯狂的主意: 如果可以找到一个始终会显示为缺少字形框的字符,则可以使用与此JavaScript字体检测器相同的技术-在屏幕外渲染该字符和缺少字形框并比较其宽度。 如果它们不同,则说明该字符未呈现为缺少的字形框。 当然,这对于固定宽度的字体根本不起作用,对于许多字符具有相同宽度的其他字体,它可能会有很多固定的负数。 回答2 不知道是否可以继续使用它(浏览器可能会更改不支持的字符所显示的内容),也不确定是否已对其进行了优化(因为我对这里要测量的理想边界没有很好的了解),但是如果经过审核,则以下方法(在画布上绘制文本并检查结果作为图像)可能比检查宽度更可靠,更准确。 开头的所有代码只是浏览器检测,我们无法使用它,因为无法进行功能检测。 (function () { // http://www.quirksmode.org/js/detect.html var BrowserDetect = { init: function () { this.browser = this
  • JavaScript基础语法知识(一)
    JavaScript基础语法知识(一) JavaScript基础语法知识(二) JavaScript基础语法知识(三) JavaScript基础语法知识(四) JavaScript基础语法知识(五) JavaScript基础语法知识(六) B站对应JavaScript学习出处 文章目录 JavaScript基础(一)01-计算机编程基础1 - 编程语言1.1 编程1.2 计算机语言1.3 编程语言1.4 翻译器1.5 编程语言和标记语言区别总结 2 - 计算机基础2.1 计算机组成2.2 数据存储2.3 数据存储单位2.4 程序运行 02-初识JavaScript1 - 初始JavaScript1.1 JavaScript 是什么1.2 JavaScript的作用1.3 HTML/CSS/JS 的关系1.4 浏览器执行 JS 简介1.5 JS 的组成**ECMAScript****DOM——文档对象模型****BOM——浏览器对象模型** 1.6 JS 初体验 2- JavaScript注释2.1 单行注释2.2 多行注释 3 - JavaScript输入输出语句 03-变量1 - 变量的概念1.1 什么是变量1.2 变量在内存中的存储 2 - 变量的使用2.1 声明变量2.2 赋值2.3 变量的初始化2.4 变量语法扩展更新变量同时声明多个变量声明变量特殊情况 2.5
  • WebGL 被检测为支持,但实际上不支持(WebGL detected as supported when it is actually not)
    问题 我在 Android 的 WebView 中使用 WebGL。 为了检测是否支持 WebGL,我使用了这个函数。 Android KitKat 设备没有启用 WebGL 支持,正如到处提到的那样。 但是,在我的 4.4.2 测试设备中,检测功能返回 true,并且当从 WebView 调用 http://webglreport.com 时,它还表示支持 WebGL1。 不出所料,没有任何东西被渲染。 因此,如果 WebGL 不起作用,我想避免使用页面的 WebGL 版本。 有什么办法可以更好地检测 webGL? 或者我应该说“如果 Android < 5,甚至不要尝试检查是否支持 WebGL,因为它可能会撒谎”。 回答1 我在 Android 设备上也有过类似的经历。 通过将 Android 浏览器列入黑名单来解决(并且,如果我理解正确,还可以查看股票网页视图)。 更新后的 Chrome 通常工作正常。 回答2 与@kirill-dmitrenko 的回答一致,但避免解析用户代理,我已将所有不支持“let”构造(http://caniuse.com/#feat=let)的浏览器列入黑名单,虽然无关,但似乎所有支持 webgl 的现代浏览器都支持: var supported; try { var canvas = document.createElement('canvas'
  • 检测音频是否在浏览器Javascript中播放(Detect if audio is playing in browser Javascript)
    问题 是否存在一种全局方法来检测音频何时在浏览器中播放或开始播放。 类似if(window.mediaPlaying()){... 无需将代码绑定到特定元素? 编辑:这里重要的是无论音频来自何处,都能检测到任何音频。 无论是来自iframe,视频,Web Audio API等。 回答1 没有人应该使用它,但是它可以工作。 基本上,我发现访问整个窗口音频的唯一方法是使用MediaDevices.getDisplayMedia()。 从那里,可以将MediaStream馈送到AnyalizerNode,该节点可用于检查音频音量是否大于零。 仅在Chrome或Edge中可用(仅在Linux上的Chrome 80中经过测试) JSFiddle与<video> , <audio>和YouTube! 重要的代码位(由于代码段iframe中的功能政策,因此无法发布到有效的代码段中): var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var bufferLength = analyser.fftSize; var dataArray = new Float32Array(bufferLength); window.isAudioPlaying = () => { analyser