Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误:
Uncaught TypeError: Cannot read property 'nodeType' of null
错误原因:从stackoverflow上查了,这个bug可能是由于dom元素未加载完而先执行了jquery代码引起的。
错误分析:我这个实例为:点击某个表单标签时(如checkbox),widget重新进行了render()操作(将dom元素remove并重新绘制),而formit插件给form表单默认增加的监听事件还作用在已经被移除dom的元素上,所以执行formit事件的时候,target元素为null,报错抛出。出错的代码是jquery里追踪事件的捕获与冒泡的一段代码。参数为null时则报此错误。
解决的方法是:查走代码,去掉不合理的重绘,或将重绘过程放到listener都执行完成后进行。
2.chrome的audio元素默认样式修改
chrome的audio元素默认样式不是很美观,大多数时候下载按钮显得很多余。如果需要修改播放样式有如下两个解决方案:
1)隐藏默认的audio,自己重绘一个audio播放器,并用js与默认播放器关联控制。这样播放器样式完全自定义,可以满足任何对于美观的要求。
2)对默认audio的样式进行一些修改,让它达到需求。这样播放器的外观还是很局限,如果对样式要求不高可以这么做。
我们这里主要讨论第二种,首先设置属性:controls="controls",显示audio播放控件,显示出来以后,在这里我主要说两点:
1)如何隐藏下载按钮
在stackoverflow上查后,可以设置audio的属性
controlsList="nodownload"
2)如何隐藏音量按钮or播放进度条。
经过调试发现,可以通过设置audio标签的width,浏览器会自动进行audio的自适应。
在设置width为300的时候,显示效果:
在设置width为200的时候,显示效果:
在设置width为100的时候,显示效果:
在此基础上我们可以进行一定的掩盖与缩放实现我们想要的效果。举个例子:我们要播放进度条而不显示音量按钮,那么我们就可以采用audio的width为300,并将audio标签放到一个ovflow:hidden;width:210px;的外层div中。
Cannot read property 'nodeType' of null; audio元素默认样式下载按钮的更多相关文章
- rest.css解决不同浏览器元素默认样式不同的问题
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...
- JavaScript Uncaught TypeError: Cannot read property 'value' of null
用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...
- js错误Cannot set property 'action' of null
Cannot set property 'action' of null [自己解决问题答案] 应该放到form里面 [网上答案]是页面无法加载完毕执行代码.可以把获取元素等一系列的操作放在 wind ...
- 【jQuery】jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read property 'nodeType' of undefined
jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read p ...
- echarts js报错 Cannot read property 'getAttribute' of null
本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...
- 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案
此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...
- org.hibernate.PropertyValueException: not-null property references a null or transient value:
org.hibernate.PropertyValueException: not-null property references a null or transient value: com.bj ...
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
- Extjs4---Cannot read property 'addCls' of null
用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...
随机推荐
- 中文¥乱码 vue js
/** * * 中文¥格式化,返回格式化后的¥100.00 * @param {any} money */utils.formatCNY = function (money) { let format ...
- [考试反思]0828NOIP模拟测试32:沉底
,,190,180,170,170... 倒数第6,75. 啊...再这么下去要失去理想了... 开学翘课停课以来的第一场考试,就考成这鬼模样. 本来还可以凭借那几次高分苟在公共卷总分的第2,这一场直 ...
- Centos7下安装nexus3.x 安装
1.官网下载unix版本 2.上传到linux系统的/usr/目录下 [root@lmll70op-ne ~]# cd /usr/ [root@lmll70op-ne usr]# ll 3.解压,并重 ...
- P4873 [USACO14DEC] Cow Jog_Gold 牛慢跑(乱搞?二分?)
(话说最近写的这类题不少啊...) 化简:给定数轴上一系列点,向正方向移动,点不能撞在一起,如果碰到一起就需要放到另外一行,求要多少行才能满足所有点不相撞的条件. (被标签误解,老是想到二分答案... ...
- 手把手带你实战下Spring的七种事务传播行为
目录 本文目录 一.什么是事务传播行为? 二.事务的7种传播行为 三.7种传播行为实战 本文介绍Spring的七种事务传播行为并通过代码演示下. 本文目录 一.什么是事务传播行为? 事务传播行为(pr ...
- mysql数据库基本操作语句
1 更改字段名:change alter table student change column gradenews grade int(11); 2 增加字段和删除字段 alter table s ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
- 你能说说Java中Comparable和Comparator的区别吗
之前面试中被问到这个问题,当时不屑(会)回答,下来特意查了查,整理如下. Java 中为我们提供了两种比较机制:Comparable 和 Comparator,二者都是用来实现对象的比较.排序. 下面 ...
- 使用 Casbin 作为 ThinkPHP 的权限控制中间件
PHP-Casbin 是一个强大的.高效的开源访问控制框架,它支持基于各种访问控制模型的权限管理. Think-Casbin 是一个专为 ThinkPHP5.1 定制的 Casbin 的扩展包,使开发 ...
- B2B电商正在向一个新的方向转变
在互联网+.中国制造2025等国家战略规划的不断催发下,淡出舆论风口多时的B2B电商,开始重新回归公众视野,B2B行业也就此得到一剂强心剂.不过值得关注的是,B2B平台商业模式已经开始发生变革. 互联 ...