معلومات المتصفح
كيف تحصل على معلومات المتصفح
الكائن
يوجد العديد من المعلومات التي يمكن الحصول عليها بواسطة الكائن
معرفة إصدار المتصفح
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض إصدار المتصفح.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Browser Version</h1>
<p>You can use the "navigator.appVersion" attribute
to get the browser version information.</p>
<p id="version"></p>
<script>
// version في متغير إسمه version يساوي id هنا قمنا بتخزين العنصر الذي يملك
var version = document.getElementById('version');
// version هنا قمنا بعرض إسم إصدار المتصفح في العنصر الذي يمثله المتغير
version.innerHTML = 'Browser version: ' + navigator.appVersion;
</script>
</body>
</html>معرفة نظام تشغيل المستخدم
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض إسم نظام التشغيل الخاص بالمستخدم.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Platform</h1>
<p>You can use the "navigator.platform" attribute
to get the platform on which browser is running.</p>
<p id="platform"></p>
<script>
// platform في متغير إسمه platform يساوي id هنا قمنا بتخزين العنصر الذي يملك
var platform = document.getElementById('platform');
// platform هنا قمنا بعرض إسم نظام التشغيل الخاص بالمستخدم في العنصر الذي يمثله المتغير
platform.innerHTML = 'Operating system: ' + navigator.platform;
</script>
</body>
</html>معرفة لغة متصفح المستخدم
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض لغة المتصفح.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Browser's UI Language</h1>
<p>You can use the "navigator.language" attribute
to get the browser's UI language.</p>
<p id="language"></p>
<script>
// language في متغير إسمه language يساوي id هنا قمنا بتخزين العنصر الذي يملك
var language = document.getElementById('language');
// language هنا قمنا بعرض لغة المتصفح في العنصر الذي يمثله المتغير
language.innerHTML = 'Operating system: ' + navigator.language;
</script>
</body>
</html>معرفة ما إن كان المستخدم يسمح بالكوكيز أم لا
يمكنك استخدام الخاصية
قيمتها تكون
في المثال التالي قمنا بعرض ما إن كان المتصفح يسمح بتخزين الكوكيز أم لا.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Check If Cookies Are Enabled</h1>
<p>You can use the "navigator.cookieStatus" attribute to check
whether cookies are enabled in the user's browser or not.</p>
<p id="cookieStatus"></p>
<script>
// cookieStatus في متغير إسمه cookieStatus يساوي id هنا قمنا بتخزين العنصر الذي يملك
var cookieStatus = document.getElementById('cookieStatus');
// cookieStatus هنا قمنا بعرض ما إن كان المتصفح يسمح بتخزين الكوكيز أم لا في العنصر الذي يمثله المتغير
cookieStatus.innerHTML = 'Are cookies allowed: ' + navigator.cookieEnabled;
</script>
</body>
</html>معرفة ما إن كان يوجد إتصال بالنت أم لا
يمكنك استخدام الخاصية
قيمتها تكون
في المثال التالي قمنا بعرض ما إن كان المتصفح متصل بالنت أم لا.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Check Internet Connection</h1>
<p>You can use the "navigator.onLine" attribute to check
whether the user is connected to the internet or not.</p>
<p id="internetStatus"></p>
<script>
// internetStatus في متغير إسمه internetStatus يساوي id هنا قمنا بتخزين العنصر الذي يملك
var internetStatus = document.getElementById('internetStatus');
// internetStatus هنا قمنا بعرض ما إن كان المتصفح متصل بالنت أم لا في العنصر الذي يمثله المتغير
internetStatus.innerHTML = 'Is browser connected to the internet: ' + navigator.onLine;
</script>
</body>
</html>مراقبة حالة النت في الجهاز
يمكنك استخدام الحدث
في المثال التالي قمنا ببناء دالة إسمها
بعدها قمنا باستدعاء هذه الدالة في ثلاث حالات كما يلي:
- عندما تفتح الصفحة بالكامل بواسطة الحدث
'load' . - عندما يصبح المتصفح على اتصال بالنت بواسطة الحدث
'online' . - عندما يصبح المتصفح غير متصل بالنت بواسطة الحدث
'offline' .
ملاحظة: عند تجربة المثال التالي، قم بقطع النت عن الجهاز و من ثم إعادته لتلاحظ كيف ستتغير الرسالة التي تشير إلى حالة النت.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.online {color: green;}
.offline {color: red;}
</style>
</head>
<body>
<h1>JavaScript Watch Internet Connection Status</h1>
<p>You can use the "online" and "offline" events to
keep watching whether the browser is online or offline.</p>
<p>Toggle your internet connection on/off to see how it works.</p>
<p id="internetStatus"></p>
<script>
// يمكن استخدامها لطباعة حالة الإتصال بالنت updateConnectionStatus هنا قمنا بتعريف دالة إسمها
function updateConnectionStatus() {
// لأننا سنعرض حالة النت فيه internetStatus يساوي id هنا قمنا بتخزين العنصر الذي يملك
var internetStatus = document.getElementById('internetStatus');
// لإعلام المستخدم internetStatus حين يكون المتصفح متصل بالنت سيتم تحديث نص العنصر
// حتى يظهر باللون الأخضر online أنه متصل بالنت مع جعل العنصر يستخدم الكلاس
if (navigator.onLine) {
internetStatus.innerHTML = 'You are online.';
internetStatus.className = 'online';
}
// لإعلام المستخدم internetStatus حين يكون المتصفح متصل بالنت سيتم تحديث نص العنصر
// حتى يظهر باللون الأحمر offline أنه غير متصل بالنت مع جعل العنصر يستخدم الكلاس
else {
internetStatus.innerHTML = 'You are offline.';
internetStatus.className = 'offline';
}
}
// لطباعة حالة النت عندما تفتح الصفحة load هنا قمنا بإضافة الحدث
window.addEventListener('load', updateConnectionStatus);
// لمراقبة متى يكون جهاز المستخدم متصل بالنت online هنا قمنا بإضافة الحدث
window.addEventListener('online', updateConnectionStatus);
// لمراقبة متى يكون جهاز المستخدم غير متصل بالنت offline هنا قمنا بإضافة الحدث
window.addEventListener('offline', updateConnectionStatus);
</script>
</body>
</html>