Skip to content

用户感知相关技术

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);