09-浏览器相关
windows事件
js
// 监听屏幕尺寸
window.onresize = function () {
}
// 页面加载完成后触发
window.onload = function() {
}onload到底是资源加载完成还是渲染完成
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
alert('first');
</script>
<body >
<img class="currentImg" onload="alert('img1')" src="https://fastly.picsum.photos/id/67/200/130.jpg?hmac=24m0vrmpltCMoM7x_b5e_nyZAUIB6rqj6k37Gk3vgAo" alt=""/>
<img class="currentImg" onload="alert('img2')" src="https://fastly.picsum.photos/id/264/200/330.jpg?hmac=btS6pNync9pgxdFoBOhvIGRhREuIR-kZC3Gi4I7t1GQ" alt=""/>
</body>
<script>
window.onload = function(){
alert('last')
}
</script>
</html>原理： 利用alert阻断浏览器渲染
结果：
1、输出依次是 first、img2、img1、last, 竟然先加载了第二个图片，说明资源加载时的
2、浏览器弹屏img2、img1时图片并未展示，说明onload调用时机是
3、去掉两个<img>中的onload属性发现弹屏“last”时 ，即window.onload表示资源加载而非渲染结束后调用
4、将<img>中的URL改成错误的URL发现window.onload同样调用了，但此时发现浏览器控制台已经输出了图片加载失败的error，
5、将两个<img>中的URL都改成错误的URL，发现window.onload同样调用了，
浏览器注入外部JS文件
需要注意的是，这个js文件不能使用本地文件地址,使用网络路径。比如http://127.0.0.1/test.js
js
const createScript = document.createElement("script")
createScript.setAttribute("src", "远程js路径")
const doc = document.documentElement;
doc.insertBefore(createScript, doc.firstChild)禁止右键操作
js
//禁止页面选择以及鼠标右键
document.οncοntextmenu = function () {
return false;
};
document.onselectstart = function () {
return false;
};
//禁用右键
document.oncontextmenu = function () {
return false;
};
//在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//禁用开发者工具F12
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
};