کار با اشیاء navigator و screen
شئ navigator
شئ navigator نیز یکی دیگر از خاصیتهای شئ window است. این شئ دارای خاصیتهایی است که اطلاعات مفیدی را در رابطه با مرورگر نگهداری میکنند. البته برخی از خاصیتهای این شئ فقط در بعضی از مرورگرها پشتیبانی میشوند. در ادامه فقط به معرفی مهمترین خاصیتهای این شئ که در تمام مرورگرها پشتیبانی میشوند میپردازیم.
مهمترین و پر کاربردترین خاصیت شئ navigator، خاصیت userAgent است. این خاصیت یک رشته است که حاوی اطلاعات مفیدی در مورد نوع مرورگر، نسخهی مرورگر، نوع سیستم عامل، نسخهی سیستم عامل و برخی اطلاعات دیگر است. به عنوان مثال مقدار این خاصیت در نسخهی ۶۳ از مرورگر فایرفاکس و در نسخهی ۶۴ بیتی از سیستم عامل Windows 10 به صورت زیر است.
navigator.userAgent;
← "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0"
مشاهده میکنید که با توجه به مقدار خاصیت userAgent به راحتی میتوان نوع مرورگر و سیستم عامل را تشخیص داد. در این خاصیت زیر رشتهی "Firefox/63.0" نشاندهندهی نسخهی ۶۳ از مرورگر فایرفاکس است. همچنین زیر رشتهی "Windows NT 10.0" نشاندهندهی سیستم عامل ویندوز ۱۰ و زیر رشتهی "Win64" نشاندهندهی نسخهی ۶۴ بیتی از این ویندوز است.
اما همیشه استخراج اطلاعات از این رشته به این سادگی نیست. متاسفانه بنا به مسائل تاریخی، این رشته معمولاً حاوی بخشهایی گمراه کننده است که تشخیص نوع سیستم عامل و مرورگر را کمی دشوار میکند. مثلاً به رشتهی زیر توجه کنید.
navigator.userAgent;
← "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/44.0.2403.155 Safari/537.36"
این رشته نشاندهندهی نسخهی ۴۴ مرورگر Chrome در سیستم عامل ویندوز ۸ میباشد. همچنین از زیر رشتهی "WOW64" میتوان متوجه شد که مرورگر از نوع ۳۲ بیتی، و سیستم عامل از نوع ۶۴ بیتی است. اما همانطور که مشاهده میکنید استخراج این اطلاعات از رشتهی فوق چندان ساده به نظر نمیرسد. جهت کسب اطلاعات بیشتر در مورد مقدار خاصیت userAgent در انواع مرورگرها و نحوهی استخراج اطلاعات مفید از این رشته به وبسایت whatismybrowser.com مراجعه کنید.
نکته : مقدار خاصیت userAgent از طریق تنظیمات مرورگر قابل تغییر است. بنابراین نباید برنامهها به شکلی نوشته شوند که متکی به مقدار این خاصیت باشند. از این خاصیت معمولاً برای جمعآوری آمار از کاربران یک سایت استفاده میشود. یعنی مدیر سایت و برنامهنویسان سایت با استفاده از این آمار میتوانند متوجه شوند که میزان استفاده از مرورگرها و سیستم عاملهای مختلف در بین کاربرانشان به چه شکل است. اما نباید برنامههای نوشته شده وابسته به مقدار این خاصیت باشند. زیرا ممکن است کاربر مقدار این خاصیت را تغییر داده باشد. هرچند این کار به ندرت توسط کاربران انجام میشود.
از دیگر خاصیتهای شئ navigator میتوان به موارد زیر اشاره کرد.- cookieEnabled : در صورتی که کوکیها فعال باشند مقدار این خاصیت true و در غیر این صورت false خواهد بود.
- language : زبان پیشفرض مرورگر (مثلاً "en-US").
- onLine : در صورتی که مرورگر به اینترنت متصل باشد مقدار این خاصیت true و در غیر این صورت false خواهد بود.
- platform : نوع پلتفرم یا سیستم عامل را مشخص میکند (مثلاً "Win32" یا "MacIntel").
- plugins : آرایهای از افزونههای نصب شده بر روی مرورگر.
سعی کنید مقدار هر یک از خاصیتهای فوق را در مرورگرهای مختلف در محیط کنسول مشاهده کنید.
شئ screen
شئ screen نیز یکی از خاصیتهای شئ window میباشد که با استفاده از خاصیتهای آن میتوان اطلاعاتی را در مورد صفحه نمایش کسب کرد. مهمترین خاصیتهای این شئ width و height هستند که عرض و ارتفاع صفحه نمایش را بر حسب پیکسل نگهداری میکنند. به عنوان مثال در کامپیوتری که من در حال استفاده از آن هستم مقدار این خاصیتها به شکل زیر است.
screen.width;
← 1600
screen.height;
← 900
توجه کنید که این اعداد مربوط به ابعاد صفحه نمایش هستند و ارتباطی با اندازهی مرورگر ندارند. معمولاً تمام فضای صفحه نمایش به مرورگر اختصاص داده نمیشود و فقط بخشی از این فضا توسط مرورگر قابل استفاده است. مثلاً در سیستم عامل ویندوز معمولاً بخشی از فضای صفحه نمایش توسط نوار وظیفه (Taskbar) اشغال میشود. و یا در تلفنهای همراه معمولاً بخشی از فضای بالای صفحه نمایش توسط نوار اعلان (Notification bar) اشغال میشود. در نتیجه معمولاً حداکثر فضایی که میتوان به مرورگر اختصاص داد کمتر از کل فضای صفحه نمایش است.
برای به دست آوردن حداکثر فضایی که توسط مرورگر قابل استفاده است میتوان از خاصیتهای availWidth و availHeight استفاده کرد. به عنوان مثال در کامپیوتری که من در حال استفاده از آن هستم به دلیل وجود نوار وظیفه در پایین صفحه نمایش، که ۴۰ پیکسل از ارتفاع صفحه نمایش را اشغال کرده است، مقدار این دو خاصیت به صورت زیر است.
screen.availWidth;
← 1600
screen.availHeight;
← 860
توجه کنید که با استفاده از خاصیتهای شئ screen فقط میتوانید اطلاعاتی در مورد ابعاد و وضعیت صفحه نمایش به دست آورید. یعنی این شئ هیچ اطلاعاتی در مورد ابعاد مرورگر در اختیار شما قرار نمیدهد. هرچند در برخی محیطها (مثلاً تلفنهای همراه) ابعاد مرورگر قابل تغییر نیست و مرورگر کل فضای قابل استفاده در صفحه نمایش را اشغال میکند. اما در برخی محیطها (مثلاً ویندوز یا لینوکس) ابعاد مرورگر میتواند بدون توجه به ابعاد صفحه نمایش تغییر کند. به همین دلیل در برخی مواقع لازم است تا ابعاد مرورگر را نیز در اختیار داشته باشیم.
برای به دست آوردن ابعاد مرورگر میتوان از خاصیتهای شئ window استفاده کرد. خاصیتهای outerWidth و outerHeight به ترتیب عرض و ارتفاع مرورگر را بر حسب پیکسل نگهداری میکنند. به عنوان مثال در کامپیوتری که من در حال استفاده از آن هستم، با کمی تغییر اندازه در مرورگر، اعداد زیر به عنوان عرض و ارتفاع مرورگر نشان داده میشوند.
window.outerWidth;
← 1331
window.outerHeight;
← 802
لازم به ذکر است که این اعداد نشاندهندهی کل فضایی است که توسط مرورگر اشغال شده است. یعنی شامل فضای مربوط به نوار عنوان، نوار آدرس، نوار ابزار و ... نیز میشوند. اما در اکثر مواقع اندازهی کل مرورگر برای ما اهمیتی ندارد و فقط اندازهی بخشی از مرورگر که صفحهی وب را نمایش میدهد برای ما مهم است. به این بخش از مرورگر اصطلاحاً Viewport گفته میشود. برای به دست آوردن ابعاد Viewport نیز میتوان از خاصیتهای innerWidth و innerHeight استفاده کرد. به عنوان مثال در کامپیوتر من، در حالتی که مرورگر در حالت تمام صفحه است، با اجرای دستورات زیر در محیط کنسول، اعداد زیر نمایش داده میشوند.
window.innerWidth;
← 1600
window.innerHeight;
← 508
همانطور که مشاهده میکنید مقدار innerWidth با مقدار کل عرض قابل استفاده توسط مرورگر برابر است. زیرا بخش Viewport تمام عرض صفحه نمایش را اشغال میکند. اما مقدار innerHeight بسیار کمتر از کل ارتفاع قابل استفاده توسط مرورگر است. زیرا بخشهایی مانند نوار عنوان، منو و نوار آدرس، بخشی از ارتفاع مرورگر را اشغال کردهاند. اما کل ارتفاع این بخشها حدود ۱۱۰ پیکسل است. و اگر این مقدار را با مقدار innerHeight، یعنی ۵۰۸ جمع کنیم، باز هم فاصلهی زیادی با مقدار ۸۶۰ که کل ارتفاع اشغال شده توسط مرورگر است خواهد داشت. آیا میتوانید حدس بزنید که دلیل این تفاوت چیست؟
دلیل این تفاوت باز بودن بخش Developer Tools مرورگر برای اجرای دستورات در کنسول بوده است. زیرا این ابزار نیز بخشی از ارتفاع مرورگر را اشغال میکند و در نتیجه ارتفاع باقی مانده برای Viewport را کاهش میدهد. البته میتوان ابزار Developer Tools را به سمت چپ یا راست مرورگر نیز منتقل کرد که در این صورت عرض این بخش را باید از مقدار innerWidth کم کرد.