ابجکت Navigator در جاوا اسکریپت

به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد دارم به مبحث ابجکت Navigator در جاوا اسکریپت بپردازیم.با ما همراه باشید.

ابجکت Navigator

ویژگی Navigator یک window(به عنوان مثال window.navigator) ارجاع به یک ابجکت Navigator است. این یک پراپرتی فقط خواندنی است که حاوی اطلاعاتی در مورد مرورگر کاربر می باشد.

از آنجایی که Window یک ابجکت سراسری است و در بالای زنجیره scope قرار دارد، بنابراین پراپرتی های شی Window مانند window.navigator بدون پیشوند window نیز قابل دسترسی است. برای مثال شما می توانید به جای window.navigator.language از navigator.language استفاده نمایید.

بخش زیر به شما نشان می دهد که چگونه می توانید اطلاعات مختلف در مورد مرورگر کاربران را دریافت کنید.

تشخیص آنلاین بودن یا آفلاین بودن مرورگر

شما برای این مورد می‌توانید از ویژگی navigator.onLine برای تشخیص آنلاین یا آفلاین بودن مرورگر (یا، application) استفاده کنید. این ویژگی یک مقدار Boolean به معنای true آنلاین یا false به معنای آفلاین برمی گرداند.

<script>
function checkConnectionStatus() {
    if(navigator.onLine) {
        alert("Application is online.");
    } else {
        alert("Application is offline.");
    }
}
</script>
 
<button type="button" onclick="checkConnectionStatus();">Check Connection Status</button>

مرورگر رویدادهای آنلاین و آفلاین را هنگامی که اتصال برقرار یا از بین می‌رود را فعال می نماید. شما می توانید توابع کنترل کننده را به این رویدادها وصل کنید تا برنامه خود را برای سناریوهای آنلاین و آفلاین سفارشی نمایید.

خب بیایید با چیزایی که تا الان یاد گرفتیم یک مینی پروژ ایجاد کنیم.در این پروژه ما با استفاده از رویداد addEventListener و پراپرتی های Navigator گفتیم که هنگام لود یا انلاین یا افلاین شدن به کمک تابع ()updateConnectionStatus ،افلاین یا انلاین بودن کاربر را برا ما نمایش دهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Detect Internet Connection Status</title>
    <style>
        body {
            text-align: center;
            font-family: "Segoe UI", Arial, sans-serif;
        }
        #status {
            border: 2px solid;
            padding: 15px 20px 15px 40px;
            width: 160px;
            margin: 0 auto;
            border-radius: 20px;
            font-size: 30px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
        }
        #status.online {
            color: green;
        }        
        #status.offline {
            color: red;
        }
        #status.online::before, #status.offline::before {
            width: 25px;
            height: 25px;
            content: "";
            border-radius: 15px;
            box-shadow: 0 0 8px;
            position: absolute;
            left: 20px;
            top: 25px;
        }
        #status.online::before {
            background: green;
        }
        #status.offline::before {
            background: red;
        }
    </style>
</head>
<body>
    <script>    
    var hint = document.getElementById("hint");
    
    // Defining function to update connection status
    function updateConnectionStatus() {  
        var status = document.getElementById("status");
        if(navigator.onLine) {
            status.innerHTML = "Online";
            status.classList.add("online");
            status.classList.remove("offline");
           document.getElementById("hint").innerHTML =  "And we're back!";
        } else {
            status.innerHTML = "Offline";
            status.classList.add("offline");
            status.classList.remove("online");  
            document.getElementById("hint").innerHTML =  "Hey, it looks like you're offline.";

        }
    }

    // Attaching event handler for the load event
    window.addEventListener("load", updateConnectionStatus);
    
    // Attaching event handler for the online event
    window.addEventListener("online", function(e) {
        updateConnectionStatus();
          
    });
    
    // Attaching event handler for the offline event
    window.addEventListener("offline", function(e) {        
        updateConnectionStatus();
    });
    </script>
    <div id="status"></div>    
    <p>Toggle your internet connection on/off to see how it works.</p>
    <p id="hint"></p>
</body>
</html>

بررسی فعال یا غیر فعال بودن کوکی ها

برای این مورد شما می توانید از navigator.cookieEnabled برای بررسی اینکه آیا کوکی ها در مرورگر کاربر فعال هستند یا خیر استفاده کنید. اگر کوکی‌ها فعال باشند، این ویژگی یک مقدار بولی true یا اگر فعال نباشد، مقدار false را برمی‌گرداند.

<script>
function checkCookieEnabled() {
    if(navigator.cookieEnabled) {
        alert("Cookies are enabled in your browser.");
    } else {
        alert("Cookies are disabled in your browser.");
    }
}
</script>
 
<button type="button" onclick="checkCookieEnabled();">Check If Cookies are Enabled</button>

نکته: قبل از ایجاد یا استفاده از کوکی‌ها در کد جاوا اسکریپت، باید از ویژگیnavigator.cookieEnabled برای تعیین فعال بودن یا نبودن کوکی‌ها استفاده نمایید.

تشخیص زبان مرورگر

برای تشخیص زبان رابط کاربری مرورگر شما می توانید از ویژگی navigator.language استفاده کنید. این پراپرتی رشته ای را برمی گرداند که نشان دهنده نوع زبان است، به عنوان مثال. “en”، “en-US”، و ….

<script>
function checkLanguage() {
    alert("Your browser's UI language is: " + navigator.language);
}
</script>
 
<button type="button" onclick="checkLanguage();">Check Language</button>

نحوه دریافت اطلاعات نام و نسخه مرورگر

ابجکت Navigator در جاوا اسکریپت دارای پنج پراپرتی اصلی است که اطلاعات نام و نسخه را در مورد مرورگر کاربر ارائه می دهد. لیست زیر نمای کلی از این ویژگی ها را نشان می دهد:

appName نام مرورگر را برمی گرداند.که برای همه مرورگرها این مقدار “Netscape” می باشد.

appVersion شماره نسخه و سایر اطلاعات مربوط به مرورگر را برمی گرداند.

appCodeName نام کد مرورگر را برمی گرداند.که برای همه مرورگرها این مقدار “Mozilla” می باشد.

userAgent یوزر ایجنت را برای مرورگر فعلی برمی‌گرداند. این ویژگی معمولاً شامل تمام اطلاعات در appName و appVersionمیباشد.

platform پلتفرمی را که مرورگر در آن در حال اجرا است برمی‌گرداند (مانند “Win32″، “WebTV OS”، و …)

<script>
function getBrowserInformation() {
	var info = "\n App Name: " + navigator.appName;
	   info += "\n App Version: " + navigator.appVersion;
	   info += "\n App Code Name: " + navigator.appCodeName;
	   info += "\n User Agent: " + navigator.userAgent;
	   info += "\n Platform: " + navigator.platform;

    alert("Here're the information related to your browser: " + info);
}
</script>
 
<button type="button" onclick="getBrowserInformation();">Get Browser Information</button>

بررسی فعال یا غیر فعال بودن جاوا در مرورگر

برای این مورد شما می‌توانید از متد ()javaEnabled برای بررسی اینکه آیا در مرورگر فعلی جاوا فعال است یا خیر، استفاده نمایید.

این متد به سادگی نشان می‌دهد چیزی که جاوا را کنترل می‌کند روشن است یا خاموش.این متد برای این نیست که به شما نشان دهد آیا مرورگر از جاوا پشتیبانی می‌کند؟ یا جاوا روی سیستم کاربر نصب شده است یا خیر.

<script>
function checkJavaEnabled() {
    if(navigator.javaEnabled()) {
        alert("Your browser is Java enabled.");
    } else {
        alert("Your browser is not Java enabled.");
    }
}
</script>
 
<button type="button" onclick="checkJavaEnabled();">Check If Java is Enabled</button>

خب دوستان گرامی به پایان بخش ابجکت Navigator در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.

سایر مقالات

window history در جاوا اسکریپت | شی history در جاوا اسکریپت

window location در جاوا اسکریپت | ابجکت لوکیش