پنجره - مدل شیء مرورگر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

مدل شیء مرورگر (Browser Object Model) به اختصار BOM به جاوا اسکریپت این اجازه را می‌دهد که با مرورگر مکالمه داشته باشد. [۱]

مدل شیء مرورگر (Browser Object Model (BOM))

هیچ استاندارد رسمی‌ای برای مدل شیء مروگر (Browser Object Model (BOM)) وجود ندارد.

از آنجایی که مرورگرهای مدرن (تقریبا) متدها و ویژگی‌های یکسانی را برای تعامل جاوا اسکریپت پیاده‌سازی کرده‌اند، این پیاده‌سازی‌ها همانند متدها و ویژگی‌های BOM در نظر گرفته می‌شوند.

شیء پنجره (Window Object)

شیء window توسط تمامی مروگرها پشتیبانی می‌شود. این شیء به پنجره مرورگر اشاره دارد.

تمامی اشیا، توابع و متغیرهای کلی (global) به صورت خودکار عضوی از شیء پنجره (window) در نظر گرفته می‌شوند.

متغیرهای کلی ویژگی‌های شیء پنجره هستند.

متدهای کلی نیز متدهای شیء پنجره هستند.

حتی شیء سند (Document object) (از HTML DOM) یک ویژگی از شیء پنجره است:

window.document.getElementById("header");

با دستور زیر یکسان است:

document.getElementById("header");

سایز پنجره (Window Size)

از دو ویژگی می‌توان برای مشخص کردن اندازه صفحه مرورگر استفاده کرد.

هر دو ویژگی اندازه صفحه را بر حسب پیکسل برمی‌گردانند:

  • window.innerHeight - ارتفاع پنجره مرورگر (بر حسب پیکسل)
  • window.innerWidth - عرض پنجره مرورگر (بر حسب پیکسل)
پنجره مرورگر (ناحیه قابل مشاهده مرورگر) شامل نوار ابزار (toolbar) و نوار پیمایش‌ها (scrollbars) نمی‌شود.

برای مرورگر اینترنت اکسپلور نسخه‌های ۵، ۶ ، ۷، ۸:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

و یا:

  • document.body.clientHeight
  • document.body.clientWidth

یک راه حل عملی با جاوا اسکریپت (با قابلیت پشتیبانی از تمام مرورگرها) به صورت زیر است:

مثال

1var w = window.innerWidth
2|| document.documentElement.clientWidth
3|| document.body.clientWidth;
4
5var h = window.innerHeight
6|| document.documentElement.clientHeight
7|| document.body.clientHeight;


مشاهدهٔ نتیجه


مثال بالا ارتفاغ و عرض پنجره مرورگر (که شامل نوار ابزار/نوار پیمایش نمی‌شود) را نمایش می‌دهد.

سایر متدهای مربوط به پنجره (Window Methods)

برخی از این متدها عبارتند از:

  • متد window.open() - باز کردن یک پنجره جدید
  • متد window.close() - بستن پنجره جاری
  • متد window.moveTo() - جابه‌جا شدن به پنجره جاری
  • متد window.resizeTo() تغییر سایز پنجره جاری

منابع آموزشی