用户感知相关技术
1. 页面最小化/恢复
当用户最小化页面或恢复页面时,可以通过 visibilitychange
事件来监听。
js
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
console.log('页面被最小化了');
} else {
console.log('页面恢复了');
}
});
2. 页面关闭
js
window.addEventListener('beforeunload', function(event) {
// 提示用户保存数据
event.preventDefault();
event.returnValue = '';
console.log('页面即将关闭');
});
3. 页面失去焦点/获得焦点
js
window.addEventListener('blur', function() {
console.log('页面失去焦点');
});
window.addEventListener('focus', function() {
console.log('页面获得焦点');
});
4. 页面滚动
js
window.addEventListener('scroll', function() {
console.log('页面正在滚动');
});
5. 页面大小变化
js
window.addEventListener('resize', function() {
console.log('页面大小发生了变化');
});
6. 获取用户的IP、地理位置
- 可以使用第三方服务(推荐)
js
fetch('https://ipinfo.io/json')
.then(response => response.json())
.then(data => {
console.log(`Your location is: ${data.city}, ${data.region}, ${data.country}`);
});
- 通过浏览器获取 API(容易失败)
js
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
console.log(`Your latitude: ${position.coords.latitude}, longitude: ${position.coords.longitude}`);
}, error => {
console.error(`Error: ${error.message}`);
});
} else {
console.error('Geolocation is not supported by this browser.');
}
7. 获取用户的浏览器信息
js
const browserInfo = {
appName: navigator.appName,
appVersion: navigator.appVersion,
userAgent: navigator.userAgent,
platform: navigator.platform,
language: navigator.language
};
console.log('Browser Information:', browserInfo);
8. 获取用户的设备信息
js
const deviceInfo = {
deviceMemory: navigator.deviceMemory,
hardwareConcurrency: navigator.hardwareConcurrency,
maxTouchPoints: navigator.maxTouchPoints
};
console.log('Device Information:', deviceInfo);