09-浏览器相关
windows事件
js
// 监听屏幕尺寸
window.onresize = function () {
}
// 页面加载完成后触发
window.onload = function() {
}
监听滚动条是否到达底部
判断滚动位置:通过判断滚动位置与页面高度的差值来判断是否到达底部。当滚动位置与页面高度的差值小于等于一个阈值时,即可认为到达底部。
js
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
var threshold = 50; // 阈值,可以根据实际情况调整
if (documentHeight - scrollTop - windowHeight <= threshold) {
// 到达页面底部的逻辑处理
console.log('到达页面底部');
}
});
使用Intersection Observer API:Intersection Observer API是一种现代的浏览器API,可以用于监测元素是否进入或离开视窗。 可以创建一个Intersection Observer实例,观察页面底部元素是否进入视窗,从而判断是否到达页面底部。
js
var options = {
root: null, // 默认为视窗
rootMargin: '0px',
threshold: 1.0 // 元素完全进入视窗时触发回调
};
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// 到达页面底部的逻辑处理
console.log('到达页面底部');
}
});
}, options);
var target = document.querySelector('#bottom-element'); // 页面底部元素的选择器
observer.observe(target);
判断页面是否有滚动条
js
function hasScrollbar(element) {
if (element){ //判断某个元素是否有滚动条
return element.scrollHeight > element.clientHeight;
}else{ // 判断页面是否有滚动条
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}
}
判断是否是移动端
- 手机:通常认为小于 768px 的屏幕宽度属于手机。
- 平板:通常认为屏幕宽度在 768px 至 1024px 之间属于平板。
- 桌面:通常认为大于 1024px 的屏幕宽度属于桌面。
js
function detectDeviceType() {
const mobileThreshold = 768;
const tabletThreshold = 1024;
const screenWidth = window.innerWidth;
if (screenWidth >= tabletThreshold) {
return 'desktop';
} else if (screenWidth >= mobileThreshold && screenWidth < tabletThreshold) {
return 'tablet';
} else {
return 'mobile';
}
}
// 使用示例
const deviceType = detectDeviceType();
console.log(`Detected device type: ${deviceType}`);
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;
}
};
url地址得到网站地址
js
function getWebsiteUrl(urlString) {
try {
// 使用URL对象解析url字符串
const url = new URL(urlString);
// 获取协议(http:或https:等)
const protocol = url.protocol;
// 获取主机名(例如 www.example.com)
const hostname = url.hostname;
// 获取端口号,默认是空字符串如果没有指定
const port = url.port ? `:${url.port}` : '';
// 构造网站地址
const websiteUrl = `${protocol}//${hostname}${port}`;
return websiteUrl;
} catch (error) {
// 如果输入的url无效,则返回错误信息
return 'Invalid URL';
}
}
// 示例使用
console.log(getWebsiteUrl('http://www.example.com/path/to/page?name=value&another=value'));
// 输出:http://www.example.com
console.log(getWebsiteUrl('https://sub.domain.com:8080/some/path'));
// 输出:https://sub.domain.com:8080