用户感知相关技术

1. 页面最小化/恢复

当用户最小化页面或恢复页面时，可以通过 visibilitychange 事件来监听。

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        console.log('页面被最小化了');
    } else {
        console.log('页面恢复了');
    }
});

2. 页面关闭

window.addEventListener('beforeunload', function(event) {
    // 提示用户保存数据
    event.preventDefault();
    event.returnValue = '';
    console.log('页面即将关闭');
});

3. 页面失去焦点/获得焦点

window.addEventListener('blur', function() {
    console.log('页面失去焦点');
});

window.addEventListener('focus', function() {
    console.log('页面获得焦点');
});

4. 页面滚动

window.addEventListener('scroll', function() {
    console.log('页面正在滚动');
});

5. 页面大小变化

window.addEventListener('resize', function() {
    console.log('页面大小发生了变化');
});

6. 获取用户的IP、地理位置

可以使用第三方服务(推荐)

fetch('https://ipinfo.io/json')
    .then(response => response.json())
    .then(data => {
        console.log(`Your location is: ${data.city}, ${data.region}, ${data.country}`);
    });

通过浏览器获取 API(容易失败)

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. 获取用户的浏览器信息


const browserInfo = {
    appName: navigator.appName,
    appVersion: navigator.appVersion,
    userAgent: navigator.userAgent,
    platform: navigator.platform,
    language: navigator.language
};

console.log('Browser Information:', browserInfo);

8. 获取用户的设备信息

const deviceInfo = {
    deviceMemory: navigator.deviceMemory,
    hardwareConcurrency: navigator.hardwareConcurrency,
    maxTouchPoints: navigator.maxTouchPoints
};
console.log('Device Information:', deviceInfo);

用户感知相关技术 ​

用户感知相关技术