Xác định truy cập từ thiết bị di động bằng JavaScript

Trong bối cảnh thiết bị di động ngày càng trở nên quan trọng, hệ thống quản trị cho cả máy tính và thiết bị di động có thể giống nhau. Tuy nhiên, tùy thuộc vào nguồn truy cập, bạn có thể cần chuyển hướng người dùng đến các trang khác nhau hoặc thực hiện các xử lý riêng biệt khi đăng nhập hoặc trong một số giai đoạn nhất định.

Để thực hiện điều này, chúng ta có thể sử dụng đối tượng navigator trong JavaScript.

Trước tiên, hãy tìm hiểu về các thuộc tính liên quan đến đối tượng navigator:


<html>
<head>
    <meta charset="utf-8">
    <title>Đối tượng navigator trong JS</title>
</head>
<body>
    <div id="browserInfo"></div>
    <script>
        let infoHTML = "<p>Tên mã trình duyệt: " + navigator.appCodeName + "</p>";
        infoHTML += "<p>Tên trình duyệt: " + navigator.appName + "</p>";
        infoHTML += "<p>Phiên bản trình duyệt: " + navigator.appVersion + "</p>";
        infoHTML += "<p>Cookies được bật: " + navigator.cookieEnabled + "</p>";
        infoHTML += "<p>Nền tảng phần cứng: " + navigator.platform + "</p>";
        infoHTML += "<p>User Agent: " + navigator.userAgent + "</p>";
        infoHTML += "<p>Ngôn ngữ hệ thống: " + navigator.systemLanguage + "</p>";
        document.getElementById("browserInfo").innerHTML = infoHTML;
    </script>
</body>
</html>

Chúng ta có thể sử dụng thuộc tính userAgent để thực hiện việc kiểm tra.

Ví dụ 1: Sử dụng biểu thức chính quy để nhận diện các thiết bị.


let userAgentString = navigator.userAgent;

let isIPad = userAgentString.match(/(iPad).*OS\s([\d_]+)/);
let isIPhone = !isIPad && userAgentString.match(/(iPhone\sOS)\s([\d_]+)/);
let isAndroid = userAgentString.match(/(Android)\s+([\d.]+)/);
let isMobileDevice = isIPhone || isAndroid;

if (isMobileDevice) {
    // Xử lý cho thiết bị di động
    console.log("Truy cập từ thiết bị di động.");
} else {
    // Xử lý cho máy tính
    console.log("Truy cập từ máy tính.");
}

Ví dụ 2: Kiểm tra sự tồn tại của các chuỗi nhận dạng thiết bị di động.


function isDesktopAccess() {
    let agentInfo = navigator.userAgent;
    const mobileIdentifiers = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let isDesktop = true; // Mặc định là máy tính

    for (let i = 0; i < mobileIdentifiers.length; i++) {
        if (agentInfo.indexOf(mobileIdentifiers[i]) > -1) {
            isDesktop = false; // Tìm thấy định danh di động
            break;
        }
    }
    return isDesktop;
}

// Sử dụng
if (isDesktopAccess()) {
    console.log("Truy cập từ máy tính.");
} else {
    console.log("Truy cập từ thiết bị di động.");
}

Ví dụ 3: Chuyển hướng dựa trên loại thiết bị.


function handleDeviceRedirection() {
    const browserUserAgent = navigator.userAgent;
    const mobileUrl = 'https://m.yourdomain.com'; // Thay thế bằng URL di động của bạn

    if (browserUserAgent.indexOf('Android') > -1 ||
        browserUserAgent.indexOf('iPhone') > -1 ||
        browserUserAgent.indexOf('iPad') > -1 ||
        browserUserAgent.indexOf('iPod') > -1 ||
        browserUserAgent.indexOf('Symbian') > -1) {
        
        window.location.href = mobileUrl;
    } else {
        // Không cần làm gì hoặc xử lý cho máy tính
        console.log("Tiếp tục hiển thị trang cho máy tính.");
    }
}
// Gọi hàm để thực hiện kiểm tra và chuyển hướng nếu cần
// handleDeviceRedirection();

Ví dụ 4: Hàm kiểm tra thiết bị một cách rõ ràng.


function checkDeviceType() {
    const uAgent = navigator.userAgent;
    const mobileKeywords = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let isPC = true; // Giả định là PC

    for (let i = 0; i < mobileKeywords.length; i++) {
        if (uAgent.indexOf(mobileKeywords[i]) > -1) {
            isPC = false; // Phát hiện là thiết bị di động
            break;
        }
    }
    return isPC; // true nếu là PC, false nếu là di động
}

let isComputer = checkDeviceType();
if (isComputer) {
    console.log("Đây là truy cập từ máy tính.");
} else {
    console.log("Đây là truy cập từ thiết bị di động.");
}

Thẻ: JavaScript navigator userAgent phát hiện thiết bị di động kiểm tra thiết bị

Đăng vào ngày 30 tháng 5 lúc 12:33

Thành phố Cuồng loạn

Xác định truy cập từ thiết bị di động bằng JavaScript

Thẻ Phổ Biến