javascript高级知识四

标签: 无 分类: 未分类 创建时间:2022-12-07 10:04:12 更新时间:2024-11-05 11:34:05

1.动态加载js脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
动态加载js
*/
function loadScript(url,callback){
//如果有该JS,则移出该JS
var script=document.createElement('script');
script.type='text/javascript';
script.async='async';
script.src=url;
//该ID放入上方的判断内
script.id = "1"
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(script);
//或者放在body尾部document.body.appendChild(script);
script.onload = script.onreadystatechange = function () {
console.log("测试");
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
script.onreadystatechange=null;
callback();
}
script.onload = script.onreadystatechange = null;
}
}

// 使用

参考文章:
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
2
<!-- 谷歌广告 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8382618401389723" crossorigin="anonymous"></script>
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。