چگونه لینک را در یک پنجره پاپ آپ باز کنیم ؟

چگونه لینک را در یک صفحه پاپ آپ باز کنیم ؟

خب ابتدا روی آن راست کلیک می کنیم و در در پنجره جدید پاپ آپ لینک را باز می کنیم ! واقعا موضوع از این ساده تر ! ولی نه صبر کنید 😂 .. هنوز کلی نکته برای گفتن مانده است.همچنین قصدمان فقط معرفی یک میانبر نیست بلکه قرار است کمی کدنویسی هم به آن اضافه کنیم.

شکل و قیافه پنجره‌های پاپ‌آپ همیشه دلچسب نیستند چون آنها ما را یاد تبلیغات اجباری و خلاص نشدنی می اندازد که هربار وسط کارهای مهم سرو کله اشان پیدا می شود و با یک کلیک هم بسته نمی شوند و یا اگر بسته شوند یکی دیگرشان باز می شود.اما با این حال ممکن است گاهی نیاز باشد که یک لینک را در یک پنجره همانند شکل و ظاهر پنجره پاپ آپ باز کنیم.اما هدفمان فقط این نیست در کل ما در این مقاله میخواهیم نشان دهیم که چگونه می‌توانیم به راحتی رفتار کلیک را بر روی پیوندها اعمال کنیم تا آنها را در یک پنجره بازشو باز کنیم که البته اینکار همراه با برخی از گزینه‌های سفارشی‌ سازی مانند اندازه پنجره ها و … همراه خواهد بود پس با ما همراه شوید.

متد پنجره های پاپ آپ

پنجره بازشو یکی از قدیمی ترین روش ها برای نمایش صفحات کوچک یا تبلیغاتی به کاربر است.

کد زیر یک خط جاوا اسکریپت برای باز کردن یک برگه به صورت پاپ آپ است :

window.open('https://javascript.info/')

پس از کلیک یک پنجره جدید با URL داده شده باز می شود. اکثر مرورگرهای مدرن به گونه ای پیکربندی شده اند که به جای پنجره های جداگانه، آدرس اینترنتی را در برگه های جدید به صورت Tab باز کنند.

پاپ آپ ها از زمان های بسیار قدیم وجود دارند.و ایده اولیه آنها برای نمایش محتوای دیگری بدون بستن پنجره اصلی مرورگر بود. در حال حاضر راه‌های دیگری برای انجام این کار وجود دارد: می‌توانیم محتوا را به صورت پویا با fetch بارگذاری کنیم و آن را در یک <div> ایجاد شده به صورت پویا نشان دهیم.

همچنین، پنجره‌های بازشو در دستگاه‌های تلفن همراه مشکل هستند، که چندین پنجره را به طور همزمان نشان نمی‌دهند.

با این حال، وظایفی وجود دارد که در آن پنجره‌های بازشو هنوز استفاده می‌شوند، به عنوان مثال. برای مجوز OAuth (ورود با Google/Facebook/…) چراکه :

یک پنجره بازشو یک پنجره جداگانه است که محیط جاوا اسکریپت مستقل خود را دارد. بنابراین باز کردن یک پنجره بازشو از یک سایت شخص ثالث و غیر قابل اعتماد ایمن است.

چگونه لینک در یک پنجره پاپ آپ باز می شود ؟

به طور معمول لینک ها در همان پنجره ای باز می شوند که در آن کلیک می شود.مرورگر ها به طور پیش فرض سعی می کنند که پنجره ها و زبان های زیادی برای کاربر باز نشود که مبادا آنها دچار سردرگمی شوند. به طور مثال هر سایتی که درون آن هستید اگر روی یک لینک داخلی کلیک کنید داخل همان پنجره باز می شود ولی اگر لینک خارجی باشد در یک زبانه جدید.اما برای باز کردن لینک ها در یک پنجره پاپ آپ برای کسانی که کدنویسی HTML انجام می دهند ما ویژگی target=”_blank” را به پیوند موردنظرمان اضافه می کنیم.همچنین از ویژگی onclick و تعیین یک کد جاوا اسکریپت درون خطی window.open مانند شکل زیر استفاده کنیم.

مطمئن شوید که عرض و ارتفاع خاصی را در نظر بگیرید، در غیر این صورت برخی از مرورگرها همچنان پنجره جدید را در یک تب جدید قرار می دهند.

به قطعه کد زیر دقت کنید :

<a href="http://kanishkkunal.com" 
  target="popup" 
  onclick="window.open('http://kanishkkunal.com','popup','width=600,height=600'); return false;">
    Open Link in Popup
</a>

در اینجا ما از مرورگر می خواهیم که کد جاوا اسکریپت درون خطی ما را در رفتار کلیکی لینک با مشخص کردن ویژگی onclick اضافه کند.در اینجا ما حتی ارتفاع و عرض پنجره خود را هم تعیین می کنیم تا صفحه مناسب با آنچه که تعریف کرده ایم باز شود.سپس در صورت فراخوانی لینک پاپ آپ ما در مرورگر کاربر باز می شود.

نسخه ی نمایشی پنجره پاپ آپ

برای مشاهده عملکرد کد بالا روی دکمه زیر کلیک کنید. یک پنجره پاپ آپ با اندازه 600×600 باید ایجاد شود و پیوندی را که ما مشخص کرده ایم باز کند.

دفترچه آنلاین

جلوگیری از بلاک شدن پنجره پاپ آپ

“پنجره های جدید” و “پاپ آپ” با استفاده از target=_blank باز می شوند با این تفاوت که مرورگرهای مدرن به طور پیش فرض پنجره های جدید را در برگه های جدید قرار می دهند. که به نظر می رسد آن چیزی که شما می خواهید نیست و یا در برخی مواقع آنها بلاک می شوند. مثلا مرورگر گوگل کروم به راحتی آنها را بلاک می کند مگر در صورتی که کاربر اجازه داده باشد.اما روشی هم برای عدم بلاک شدن این پنجره نیز وجود دارد. در حالت کلی ما برای نمایش اینگونه پنجره ها از این کد استفاده می کنیم :

<script type="text/javascript">
    window.open("http://www.google.com/", "Google", "width=500,height=500");
</script>

با این حال، مسدود کردن تبلیغات یک جنگ رو به افزایش میان طراحان سایت و مرورگرها است و هرگز نمی توانید مطمئن باشید که یک پنجره پاپ آپ شما به درستی باز می شود. اگر پنجره پاپ آپ مسدود شده باشد، با فراخوانی window.open null برگشت داده می شود. بنابراین این مسله را می توان با قطعه کد زیر حل نمود :

<a href="http://www.google.com/"
    onclick="return !window.open(this.href, 'Google', 'width=500,height=500')"
    target="_blank">

اگر پنجره بازشو مسدود شود مقدار onclick true را برمی‌گرداند که با باز کردن آن در یک پنجره یا تب جدید پیوندی را که روی آن کلیک کرده‌اند دنبال می‌کند. شما همچنین می توانید از قطعه کد زیر هم استفاده نمایید :

<script>
$('#button2').live("click",function(e){    
  window.open("http://www.google.com", "yyyyy", "width=480,height=360,resizable=no,toolbar=no,menubar=no,location=no,status=no");
return false;
});
</script>

<a href="#" id="button2" ><img src="images/online.png"></a><br/>Online