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元素默认样式下载按钮的更多相关文章

  1. rest.css解决不同浏览器元素默认样式不同的问题

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  2. JavaScript Uncaught TypeError: Cannot read property 'value' of null

    用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...

  3. js错误Cannot set property 'action' of null

    Cannot set property 'action' of null [自己解决问题答案] 应该放到form里面 [网上答案]是页面无法加载完毕执行代码.可以把获取元素等一系列的操作放在 wind ...

  4. 【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 ...

  5. echarts js报错 Cannot read property 'getAttribute' of null

    本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...

  6. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  7. 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 ...

  8. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  9. Extjs4---Cannot read property 'addCls' of null

    用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...

随机推荐

  1. mysql设计规范二

    一.基本规范 必须使用InnoDB存储引擎 必须使用UTF8字符集 数据表.数据字段必须加入中文注释 二.设计规范 库名称.表名称.字段名称必须使用小写,最好不要使用驼峰式,使用“_”区分,例如use ...

  2. python items和setdefault函数

    items() dict = {'runoob': '菜鸟教程', 'google': 'Google 搜索'} print("Value : %s" % dict.setdefa ...

  3. java-optional-快速使用-教程

    前言: 在公司中开发项目时碰到一个从Java8引入的一个Optional类,以前jdk版本使用的比较低,没有使用过,于是我在网上浏览了一些文档写篇文章学习总结一下,希望没有用过的朋友们都能够快速学习到 ...

  4. java笔试面试第一天

    好久未曾启用我的博客,最近来上海找工作,想将笔试面试的过程做个记录,毕竟有总结才有提高嘛.今天算是笔试面试正式开始第一天吧,以下就是我的笔试总结(没有原题了,只有知识点): 笔试题1:java sta ...

  5. Redis实战--使用Jedis实现百万数据秒级插入

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 当我们 ...

  6. Github PageHelper 原理解析

    任何服务对数据库的日常操作,都离不开增删改查.如果一次查询的纪录很多,那我们必须采用分页的方式.对于一个Springboot项目,访问和查询MySQL数据库,持久化框架可以使用MyBatis,分页工具 ...

  7. VS Code 中使用 GitHub pull request 插件提交代码

    VS Code作为一个代码编辑器,受到很多人的喜爱:其中有很多非常有用的插件/扩展功能,也会极大的提高我们的工作效率. 这里介绍一下GitHub pull request,用来向GitHub提交在VS ...

  8. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  9. 022.掌握Pod-Pod升级和回滚

    一 deploymentPod升级和回滚 1.1 deployment升级 若Pod是通过Deployment创建的,可以在运行时修改Deployment的Pod定义(spec.template)或镜 ...

  10. 前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案(转载)

    最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言.框架和环境,前端啥都不会啊. 突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子.然后遇到了一个困扰了一整天的问题.一直调试都 ...