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. No such application config! Please add dubbo:application

    SpringBoot运行找不到application.properties配置文件 运行springBoot项目启动报错:java.lang.IllegalStateException: No suc ...

  2. 和manacher有关的乱写

    当初学kmp hash的时候被教导manacher非常的鸡肋 今天因为一篇神奇的题解我忍不住颓废了两节课把它学了 思路,代码都比较好懂 虽然它不如各种自动机霸气,唯一的功能貌似就是$O(n)$求出所有 ...

  3. Selenium +Chrome浏览器如何模拟手机操作

    Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...

  4. NOIP 模拟22

    这次考试真的是像教练说的真的挺难的,但是人家rank1还是100+, 但是咕咕蛊!

  5. HTML和css面试题:内容转载

    1.常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - ...

  6. ASP.NET Core 1.0: 指定Static File中的文件作为default page

    指定一个网站的default page是很容易的事情.譬如IIS Management中,可以通过default page来指定,而默认的index.html, index.htm之类,则早已经被设置 ...

  7. 《JAVA 程序员面试宝典(第四版)》之传递与引用篇

    废话开场白         这个周末突然很想创业,为什么呢?原因很简单,我周围的同学或者说玩的比较好的朋友都发达了,前一个月和一个两年前还睡在一张床上的朋友,他现在已经在深圳买房买车了,没错是在深圳买 ...

  8. JavaScript中的基本数据类型和引用数据类型

    ECMAScript变量包括了两种不同的数据类型 在学习JavaScript的数据类型时,我们通常会把数据类型分成六中(官方认为)Object.String.Boolean.Number.Undefi ...

  9. ubuntu 16.04上源码编译libjpeg-turbo和使用教程 | compile and use libjpeg-turbo on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/9f626e7a/,欢迎阅读! compile and use libjpeg-turbo on ubuntu 16.04 Seri ...

  10. selenium中延时等待三种方式

    selenium中的延时等待方式有三种:强制等待:sleep()  隐示等待:implicitly_wait()  显示等待 WebDriverWait() 1.强制等待:sleep(),time模块 ...