شئ جاری در Browser Environment یک سری اطلاعات در قالب یک سری ساختمان داده در رابطه با اطلاعات صفحه وب فعلی از قبیل درخواست های ارسالی و لینک صفحه جاری و صفحه وب و … دارد .

Window Document

سند HTML وارد شده در صفحه جاری یا همان DOM Document یک ویژگی از شئ‌ window می باشد . پس BOM شامل DOM هم است . این سند شامل window.document و یا به اختصار document می باشد.

لیست کامل Properties و Methods های آن ها را در مقاله Dom Document در مرورگر مشاهده کنید. برای ساخت یک Document می توان از ترکیب زیر استفاده کنیم :

document.write("Hello World!");

در متد بالا کل صفحه جاری یک متن hello world قرار می گیرد.

Window Frames

لیست frame window های موجود در صفحه را برمی گرداند. اگر یک لیست iframe در صفحه جاری داشته باشیم می توان به این آرایه دست پیدا کرد در غیر اینصورت همان window جاری صفحه را بر می گرداند.

window.frames

در متد بالا اگر iframe در صفحه جاری نداشته باشیم همان شئ window  متعلق به صفحه جاری را برمی گرداند که properties , methods تعریف شده در صفحه جاری وب را بر می گرداند.

اگر صفحه جاری – Dom Document – شامل یک سری iframes باشد می توان به هر یک از آن ها با استفاده از index آن ها دسترسی پیدا کرد.

window.frames[0].location

Window History

این ویژگی شامل اطلاعات مربوطه به تاریخچه مرورگر است. برای دسترسی به این property از window.history  یا history استفاده می کنیم. ساختمان داده برگشتی در این ویژگی History است که شامل Properties , Methods زیر می باشد.

history.go(0) //reloads the page.
history.go(-1) //back().
history.go(1) //forward().
window.history.go(2) //forward().forward()

window.history.forward()

window.history.back()

window.history.pushState({userId:10},null,'hello-worold')

window.history.replace({userId:10},null,'hello-world')

همان طور که history یک لیست از وضعیت های موجود در history می باشد . به این ترتیب می توان به ازای وضعیت جاری مقدار collection در پارامتر اول را دریافت کرد :

window.history.replaceState({id:10},'','hello-world')
window.history.state //Object { id: 10 }

تفاوت pushState , replaceState این است که زمانی که pushState استفاده می کنیم عملا وضعیت جاری حفظ و به وضعیت قبلی تبدیل می شود و عدد window.history.length یکی بیشتر می شود اما در replaceState وضعیت جدید جایگزین وضعیت قبل می شود و عدد window.history.length تغییری نمی کند. از این ویژگی برای روتینگ در جاوا اسکریپت استفاده می شود.

Window Navigator

این property شامل یک سری اطلاعات از پنجره جاری مرورگر می باشد . برای دسترسی به window.navigator یا navigator می توان دست پیدا کرد.

window.navigator.onLine //true (Returns true if the browser is online)
window.navigator.appCodeName //"Mozilla" 
window.navigator.appName //"Netscape" 
window.navigator.appVersion //"5.0 (X11)" 
window.navigator.clipboard //Clipboard { } 
window.navigator.oscpu //"Linux x86_64" 
window.navigator.userAgent //"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0" window.navigator.platform //"Linux x86_64"

برخی ویژگی های این ساختمان داده را در یک مثال در بالا ذکر کرده ایم . جالب ترین آن و پرکاربردترین می توان به onLine اشاره کرد که اگر به اینترنت اتصال داشتید true , و اگر اتصال نداشتید false بر می گرداند. ServiceWorker نیز در همین property می باشد.

Window Location

location یعنی مکانی که درخواست ارسال شده است (لینک درخواست) این ویژگی می تواند لینک درخواست صفحه وب جاری را تجزیه و تحلیل کند و همچنین پارامتر هایی که در پایین ذکر شده را set , get کند.

Location Object Properties

window.location.hash //"#hello#world"

window.location.host //gnutec.net
window.location.host //gnutec.net:22

window.location.hostname
"gnutec.net"

window.location.href
"https://gnutec.net/?p=2275&preview=true#hello"

window.location.pathname
https://gnutec.net/browser-object-model-bom/ => "/browser-object-model-bom/"
window.location.pathname
https://gnutec.net/?p=2247&preview=true#hello  => "/"

window.location.search
"?p=2247&preview=true"

با استفاده از کلاس URL می توانید به لینک درخواست ارسالی به این کلاس دسترسی داشته باشید. به طور مثال با search می توانید به صورت رشته ای همانند search به query params دسترسی داشته باشید و با searchParams می توانید به ساختمان داده مربوط دسترسی داشته باشید:

var url = new URL(window.location.href)
url.search //"?p=224&preview=true"
url.searchParams.forEach((value,key) => {
    console.log(value,key)
})
//224 p
//true preview

Location Object Properties

window.location.assign('https://gnutec.net')

window.location.replace('https://gnutec.net/')

window.screen

مشخصات مربوط به اندازه های صفحه نمایشگر بر می گرداند. مهم ترین property های موجودیت window دو مورد innerWidth , innerHeight است.

window.innerWidth //1080
window.innerHeight //480

موارد بالا عدد واقعی از سایز پنجره مرورگر را بر می گرداند. window.screen ویژگی های موجود از صفحه نمایشگر را بر می گرداند.