javascript高级知识四
1.动态加载js脚本
1 | /** |
1.动态加载JS脚本的4种方法
2.动态加载JS后执行后续文件 我们使用document的readyState属性:document.readyState,readyState 属性返回当前文档的状态。该属性返回以下值:uninitialized - 还未开始载入。loading - 载入中。interactive - 已加载,文档与用户可以开始交互。complete - 载入完成 (loaded)
3.动态加载JS过程中如何判断JS加载完成 我们把该方法添加到body的load事件中,,运行,会发现IE或Maxthon中,会弹出‘done’对话框,但是firefox或chrome中却完全没有反应,why?这是因为,如果script节点没有添加到DOM树中,那么在chrome和firefox中是不会响应script的load事件的。但是IE中却可以。
2.video
自动播放,需要设置muted属性。
1 | <video controls style="width: 100%; height: 100%; object-fit: fill" autoplay src="item.video" muted></video> |
1.video autoplay 自动播放之研究 视频静音(通过加上 muted 属性)或音量设置为 0
2.HTML 自动播放属性,autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性,视频将自动播放。
3.h5 video全屏播放 使用全屏的方式有两个,一个是模拟全屏,一个是web原生的;模拟全屏的好处是可以自定义相关控件,以达到统一多端样式的目的,并可以在全屏模式下做很多自定义的操作;缺点是,在移动端需要终端支持,且需要处理兼容问题,安卓问题多些。原生全屏相对比较方便,处理起来会比较轻松,缺点是全屏后,几乎不能做什么干预,且iOS存兼容问题,主要表现为onwebkitfullscreenchange在iOS上无法监听到,感知不到全屏状态变化,另外对当前全屏元素的标识的API支持也有问题。
4.HTML中 video标签样式铺满全屏 video标签默认不是铺满的,即使手动设置宽高100%也不会生效,所以当需要video铺满div时,需要加上一个css样式
5.HTML5 video播放器全屏(fullScreen)实现的方法
3.crossorigin
在script标签中增加 crossorigin 属性,有下面几种情况:
(1) 设置了crossorigin就相当于开启了cors校验。
(2) 开启cors校验之后,跨域的script资源在运行出错的时候,window.onerror可以捕获到完整的错误信息。
(3) crossorigin=use-credentials可以跨域带上cookie。
例如下面的谷歌广告投放代码。
1 | <!-- 谷歌广告 --> |
1.script crossorigin 属性