Window، Location و History

شیء window و کنترل آدرس و تاریخچه‌ی مرورگر

تا این‌جا بیشتر روی سند (document) و عناصر داخل آن کار کرده‌ایم، اما جاوااسکریپت در مرورگر روی یک لایه‌ی بالاتر هم دسترسی کامل دارد: خود پنجره‌ی مرورگر. شیء سراسری window نقطه‌ی ورود به این لایه است و دو شیء بسیار پرکاربرد به نام‌های location و history را در خود جای داده که کنترل آدرس صفحه و ناوبری بین صفحات را ممکن می‌سازند.

شیء window به‌عنوان ریشه‌ی همه‌چیز

شیء window نماینده‌ی خود پنجره یا تب مرورگر است و تمام متغیرهای سراسری، توابعی مثل setTimeout، و حتی خود document، در واقع ویژگی‌هایی از همین شیء هستند:

console.log(window.document === document); // true
console.log(window.innerWidth);              // عرض قابل‌مشاهده‌ی صفحه بر حسب پیکسل
console.log(window.innerHeight);             // ارتفاع قابل‌مشاهده‌ی صفحه بر حسب پیکسل

به همین دلیل نیازی نیست عبارت window. را پیش از توابع یا متغیرهای سراسری بنویسید؛ اما شناخت این ساختار کمک می‌کند بفهمید چرا مثلاً alert() در واقع همان window.alert() است.

شیء location و اطلاعات آدرس صفحه

شیء window.location اطلاعات کاملی درباره‌ی آدرس فعلی صفحه در اختیار قرار می‌دهد و همچنین امکان تغییر آن را فراهم می‌کند:

ویژگی	مقدار برای https://greendata.ir/courses?id=5#top
location.href	آدرس کامل صفحه
location.hostname	greendata.ir
location.pathname	/courses
location.search	?id=5
location.hash	#top

هدایت کاربر به آدرس جدید

تغییر مقدار location.href کاربر را به آدرس جدید هدایت می‌کند، درست مانند کلیک روی یک لینک:

// انتقال کاربر به صفحه‌ی دیگر
window.location.href = "https://greendata.ir/courses/javascript";

// روش کوتاه‌تر و معادل همان عملکرد
window.location = "https://greendata.ir/courses/javascript";

برای بارگذاری مجدد صفحه‌ی فعلی نیز متد location.reload() استفاده می‌شود که معادل زدن دکمه‌ی رفرش مرورگر است.

شیء history و ناوبری میان صفحات بازدید‌شده

شیء window.history امکان حرکت میان صفحاتی که کاربر در همان تب بازدید کرده را فراهم می‌کند، بدون آنکه لازم باشد آدرس مقصد را مستقیماً بدانید:

// بازگشت به صفحه‌ی قبلی، درست مانند دکمه‌ی Back مرورگر
history.back();

// رفتن به صفحه‌ی بعدی (در صورت وجود در تاریخچه)
history.forward();

// حرکت با تعداد گام مشخص؛ منفی یعنی عقب، مثبت یعنی جلو
history.go(-2); // دو صفحه به عقب

// تعداد صفحات موجود در تاریخچه‌ی تب فعلی
console.log(history.length);

تغییر آدرس بدون بارگذاری مجدد صفحه

یکی از قابلیت‌های مهم history، متد pushState است که امکان تغییر آدرس نوار مرورگر را بدون بارگذاری مجدد صفحه فراهم می‌کند؛ همان تکنیکی که پایه‌ی ساخت اپلیکیشن‌های تک‌صفحه‌ای (SPA) محسوب می‌شود:

history.pushState({ page: "courses" }, "", "/courses");
// آدرس نوار مرورگر به /courses تغییر می‌کند
// بدون این‌که هیچ درخواستی به سرور ارسال یا صفحه رفرش شود

این موضوع تفاوت اساسی pushState با location.href است: تغییر location.href همیشه باعث بارگذاری کامل صفحه‌ی جدید می‌شود، در حالی که pushState فقط آدرس را در تاریخچه‌ی مرورگر ثبت می‌کند و کنترل کامل محتوای صفحه بر عهده‌ی جاوااسکریپت باقی می‌ماند.

نکات کلیدی

• شیء window ریشه‌ی تمام متغیرهای سراسری و شیءهای مرورگری مثل document، location و history است.
• location.href هم برای خواندن آدرس فعلی و هم برای هدایت کاربر به آدرس جدید استفاده می‌شود.
• متدهای history.back، forward و go امکان حرکت میان صفحات بازدیدشده را بدون نیاز به دانستن آدرس دقیق فراهم می‌کنند.
• pushState آدرس نوار مرورگر را بدون بارگذاری مجدد صفحه تغییر می‌دهد و پایه‌ی اصلی اپلیکیشن‌های تک‌صفحه‌ای است.

جمع‌بندی

شیء window دروازه‌ی ورود به لایه‌ی مرورگر است و از دل آن، دو ابزار کلیدی برای مدیریت ناوبری در اختیار قرار می‌گیرد: location برای خواندن و تغییر آدرس صفحه، و history برای حرکت میان صفحات بازدیدشده یا حتی تغییر آدرس بدون بارگذاری مجدد. تسلط بر این دو شیء، پیش‌نیاز مستقیم کار با تکنیک‌های پیشرفته‌تری مثل مسیریابی سمت کلاینت در پروژه‌های بزرگ‌تر است.