کار با اشیاء history و location

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

 

شئ history

از لحظه‌ی باز شدن یک پنجره‌ی مرورگر یا یک زبانه‌ی جدید (Tab)، کاربر می‌تواند با کلیک کردن بر روی لینک‌های موجود در صفحات وب و یا تایپ کردن آدرس دلخواه در نوار آدرس مرورگر، به صفحات مختلف با آدرس‌های متفاوت مراجعه کند. تمام این انتقال‌ها و تغییراتی که در نوار آدرس مرورگر رخ می‌دهند در تاریخچه‌ی مرورگر ذخیره می‌شوند. معمولاً کاربر با زدن دکمه‌های Back و Forward می‌تواند این تاریخچه را مرور کرده و به صفحات قبلی و بعدی مراجعه کند.

در جاوا اسکریپت با استفاده از متدهای شئ history می‌توان عمل دکمه‌های Back و Forward را شبیه‌سازی کرد. با استفاده از متدهای back و forward از شئ history می‌توان به ترتیب به آدرس قبلی و آدرس بعدی در تاریخچه‌ی مرورگر مراجعه کرد. این متدها هیچ آرگومان ورودی دریافت نمی‌کنند و به سادگی می‌توان به شکل زیر از این متدها استفاده کرد.

history.back();
// یا
history.forward();

لازم به ذکر است که در یک پنجره‌ی مرورگر ممکن است چندین زبانه‌ی باز وجود داشته باشد. در این صورت هر یک از زبانه‌ها تاریخچه‌ی خاص خود را دارند و امکان دسترسی به تاریخچه‌ی یکدیگر را ندارند.

شئ history متد دیگری به نام go دارد که با استفاده از آن می‌توان چند گام به عقب یا به جلو حرکت کرد. این متد یک آرگومان ورودی دریافت می‌کند که تعداد گام‌ها را مشخص می‌کند. اعداد منفی به معنی حرکت به عقب و اعداد مثبت به معنی حرکت به جلو هستند. مثلاً دستور زیر موجب سه گام حرکت به عقب می‌شود.

history.go(-3);

البته این دستور در صورتی عمل خواهد کرد که حداقل ۳ آدرس در تاریخچه‌ی مرورگر، قبل از صفحه‌ی جاری ثبت شده باشد. با استفاده از خاصیت length نیز می‌توان تعداد آدرس‌های ذخیره شده در تاریخچه‌ی مرورگر را به دست آورد.

history.length;

توجه کنید که مقداری که خاصیت length نشان می‌دهد، با در نظر گرفتن صفحه‌ی جاری محاسبه شده است. در نتیجه اگر مقدار این خاصیت n باشد، حداکثر گام‌هایی که می‌توان به جلو یا عقب حرکت کرد برابر با n - 1 است.

نکته : بنا به دلایل امنیتی امکان دسترسی به آدرس‌های ذخیره شده در تاریخچه‌ی مرورگر وجود ندارد.

 

شئ location

یکی دیگر از اشیاء پرکاربرد در مدل BOM شئ location است. لازم به ذکر است که این شئ علاوه بر اینکه یکی از خاصیت‌های شئ window است، یکی از خاصیت‌های شئ document نیز می‌باشد. یعنی هر دو خاصیت location در شئ window و شئ document یکسان هستند و هر دو به شئ واحدی اشاره می‌کنند.

شئ location دارای خاصیت‌های زیادی است که اطلاعات مفیدی را در مورد آدرس صفحه‌ی جاری نگهداری می‌کنند. خاصیت href مهمترین خاصیت شئ location است. این خاصیت آدرس URL صفحه‌ی جاری را به صورت کامل نگهداری می‌کند. ضمناً این خاصیت خواندنی و نوشتنی است. یعنی با تغییر مقدار این خاصیت، آدرس صفحه‌ی جاری تغییر کرده و در نتیجه صفحه‌ی جدیدی در مرورگر بارگذاری می‌شود.

برای آزمایش این خاصیت ابتدا یک پنجره‌ی مرورگر جدید باز کنید و وارد یک آدرس دلخواه (مثلاً سایت گوگل) شوید. سپس در کنسول مرورگر دستور زیر را وارد کرده و خروجی را مشاهده کنید.

location.href;
← "https://www.google.com/"

مشاهده می‌کنید که آدرس صفحه‌ی جاری در این خاصیت ذخیره شده است. توجه کنید که در صورت وجود Query String و یا Hash در آدرس صفحه‌ی جاری، این بخش‌ها نیز در خاصیت href ذخیره می‌شوند. حال دستور زیر را در کنسول وارد کنید.

location.href = 'http://otedia.com/';
← "http://otedia.com/"

با وارد کردن این دستور در کنسول، پس از تغییر مقدار خاصیت href و نمایش مقدار جدید آن در کنسول، مرورگر بلافاصله اقدام به بارگذاری آدرس جدید کرده و صفحه‌ی وب جدید در مرورگر نمایش داده می‌شود.

سایر خاصیت‌های شئ location و مقدار ذخیره شده در هر یک عبارتند از :

• hash : بخشی از URL که بعد از کاراکتر "#" قرار می‌گیرد (به همراه کاراکتر "#"). در صورت عدم وجود کاراکتر "#"، مقدار این خاصیت تهی است.
• host : نام سرور به همراه شماره‌ی پورت به کار رفته برای اتصال به سرور (شماره‌ی پورت ممکن است وجود نداشته باشد).
• hostname : نام سرور بدون شماره‌ی پورت.
• pathname : مسیر و نام فایل مربوط به صفحه‌ی وب (بدون نام سرور).
• port : شماره‌ی پورت به کار رفته برای اتصال به سرور.
• protocol : پروتکل به کار رفته برای صفحه‌ی وب جاری (معمولاً ":http" یا ":https").
• search : بخش Query String از آدرس جاری (بخشی که بعد از علامت "?" قرار می‌گیرد، به همراه علامت "?").

مثال زیر مقدار هر یک از خاصیت‌های فوق را برای یک URL فرضی نمایش می‌دهد.

location.href;
← "http://otedia.com:8080/folder/file.php?q=javascript#samplehash"
location.hash;
← "#samplehash"
location.host;
← "otedia.com:8080"
location.hostname;
← "otedia.com"
location.pathname;
← "/folder/file.php"
location.port;
← "8080"
location.protocol;
← "https:"
location.search;
← "?q=javascript"

همچنین شئ location دارای ۳ متد به شرح زیر است.

• assign : این متد URL یک صفحه‌ی وب را به عنوان آرگومان ورودی دریافت می‌کند و صفحه‌ی مورد نظر را در مرورگر بارگذاری می‌کند. یعنی ارسال یک URL به این متد، معادل قرار دادن همان URL در خاصیت href است. در واقع زمانی که خاصیت href تغییر می‌کند، در پشت صحنه متد assign فراخوانی شده و صفحه‌ی جدید را بارگذاری می‌کند.
• replace : این متد نیز دقیقاً مانند متد assign یک URL را دریافت می‌کند و صفحه‌ی مورد نظر را در مرورگر بارگذاری می‌کند. تنها تفاوت این دو متد در این است که متد assign آدرس صفحه‌ی جدید را به تاریخچه‌ی مرورگر اضافه می‌کند. اما متد replace آدرس صفحه‌ی جدید را جایگزین آدرس صفحه‌ی جاری در تاریخچه‌ی مرورگر می‌کند. در نتیجه در صورت استفاده از متد assign، بعد از انتقال به صفحه‌ی جدید می‌توان با زدن دکمه‌ی Back به صفحه‌ی قبل بازگشت. اما در صورت استفاده از متد replace امکان بازگشت وجود ندارد.
• reload : اجرای این متد موجب بارگذاری مجدد صفحه‌ی جاری می‌شود (مانند زدن دکمه‌ی Refresh). توجه کنید که بارگذاری مجدد صفحه معمولاً از حافظه‌ی کش (Cache) مرورگر انجام می‌شود. اما در صورت ارسال مقدار true به عنوان آرگومان ورودی به این متد، بارگذاری مجدد صفحه قطعاً از سرور انجام می‌شود و از حافظه‌ی کش استفاده نخواهد شد.

قطعه کد زیر چند نمونه‌هایی از نحوه‌ی استفاده از این متدها را نشان می‌دهد.

location.assign('https://www.google.com');			// رفتن به صفحه‌ی جدید با امکان بازگشت

location.replace('https://www.google.com');		// رفتن به صفحه‌ی جدید بدون امکان بازگشت

location.reload();							// بارگذاری مجدد صفحه (احتمالاً از کش)

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