خصوصیت target و باز کردن در پنجره جدید

خصوصیت target: کنترل محل باز شدن لینک‌ها! 🧭

سلام به همه! تا الان یاد گرفتیم چطور با تگ <a> و خصوصیت href لینک بسازیم. اما یه سوال پیش میاد: وقتی کاربر روی لینک کلیک می‌کنه، اون صفحه کجا باز بشه؟ توی همون تب مرورگر؟ یا توی یه تب جدید؟ اینجاست که خصوصیت target وارد صحنه می‌شه!

خصوصیت target به ما اجازه می‌ده تا رفتار باز شدن لینک رو کنترل کنیم.

مقادیر اصلی خصوصیت target:

خصوصیت target می‌تونه مقادیر مختلفی داشته باشه که هر کدوم رفتار متفاوتی دارن:

۱. _self (پیش‌فرض): باز شدن در همان پنجره/تب 🔄

این مقدار، رفتار پیش‌فرض مرورگره. یعنی اگه شما خصوصیت target رو ننویسید، لینک در همون تب یا پنجره‌ای که کاربر در حال مشاهده‌شه، باز می‌شه. این رفتار معمولاً برای لینک‌های داخلی وب‌سایت توصیه می‌شه تا کاربر از سایت شما خارج نشه.

<a href="about.html">درباره ما</a>
<!-- معادل این است که بنویسیم: -->
<a href="about.html" target="_self">درباره ما</a>

۲. _blank: باز شدن در پنجره/تب جدید ✨

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

<a href="https://www.wikipedia.org" target="_blank">ویکی‌پدیا (در تب جدید)</a>

نکته امنیتی: وقتی از `target=”_blank”` برای لینک‌های خارجی استفاده می‌کنید، خوبه که خصوصیت `rel=”noopener noreferrer”` رو هم اضافه کنید. `noopener` جلوی دسترسی صفحه لینک شده به شیء `window.opener` صفحه شما رو می‌گیره و `noreferrer` هم از ارسال اطلاعات رفرنس جلوگیری می‌کنه، که هر دو برای امنیت بهتره.

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">ویکی‌پدیا (در تب جدید و امن)</a>

۳. _parent: باز شدن در فریم والد ⬆️

این مقدار برای زمانی کاربرد داره که صفحه شما داخل یک iframe یا فریم دیگه بارگذاری شده باشه. `_parent` باعث می‌شه که لینک در فریم والد (والد صفحه فعلی) باز بشه.

<!-- فرض کنید این لینک داخل یک iframe است -->
<a href="newpage.html" target="_parent">باز کردن در والد</a>

۴. _top: باز شدن در کل پنجره مرورگر 🌍

این مقدار باعث می‌شه که لینک در کل پنجره مرورگر باز بشه و هرگونه فریم یا iframe رو از بین ببره. این هم مثل `_parent` در سناریوهای پیچیده‌تر (مثل استفاده از فریم‌های زیاد) کاربرد داره.

<!-- باز کردن لینک در کل پنجره، حتی اگر داخل iframe باشد -->
<a href="fullpage.html" target="_top">باز کردن در کل پنجره</a>

۵. نام یک فریم خاص (Named Frames): 🖼️

شما می‌تونید یک نام دلخواه برای یک فریم (مثلاً با استفاده از تگ `<frame>` یا `<iframe>`) تعریف کنید و سپس از آن نام در خصوصیت target استفاده کنید تا لینک فقط در آن فریم خاص باز شود.

<!-- فرض کنید یک iframe با نام "main-content" داریم -->
<iframe name="main-content" src="default.html"></iframe>

<a href="anotherpage.html" target="main-content">رفتن به صفحه دیگر در فریم اصلی</a>

انتخاب هوشمندانه مقدار target، تجربه کاربری سایت شما را بهبود می‌بخشد و به شما کنترل بیشتری بر نحوه نمایش محتوا می‌دهد.

استفاده درست از خصوصیت target، به‌خصوص `_self` و `_blank`، به شما کمک می‌کنه تا لینک‌هاتون رو به بهترین شکل مدیریت کنید. یادتون باشه که برای لینک‌های خارجی، `target=”_blank” rel=”noopener noreferrer”` رو فراموش نکنید! 😉