جدول محتوایی
نحوه باز کردن تب جدید با جاوا اسکریپت
من اخیراً روی سیستمی کار کردم که باید یک پنجره بازشو باز کند. یک عمل خاص را می توان در پنجره بازشو و پنجره اصلی که پنجره بازشو مورد نیاز برای دریافت انتخاب را فراخوانی می کند، انجام داد. باز کردن تب جدید با جاوا اسکریپت و ارسال پیام یا انتقال داده بین دو مرورگر ساده تر از ان است که فکر می کنید!
در این مقاله، صفحه اصلی خود را ایجاد می کنیم. با کلیک کردن، می توانیم یک پنجره بازشو جدید باز کنیم. دکمه دیگری می تواند یک پیام ثابت به این تب ارسال کند.
در داخل این پنجره بازشو، کاربر می تواند سه گزینه را انتخاب کرده و گزینه انتخابی را به مبدا ارسال کند.
پیش از ادامه ی مقاله ، در صورت نیاز به خرید سرور مجازی ایران، به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
در ویدیوی زیر می توانید دمویی از آن را مشاهده کنید:
راه اندازی ساختار
من تصمیم گرفتم یک راه اندازی بسیار ساده برای این پروژه ایجاد کنم.
با ایجاد یک پوشه جدید شروع کنید و در داخل یک فایل index.html، sub.html و index.js ایجاد کنید:
بیایید با ساخت محتوای index.html شروع کنیم:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Sending messages</title> </head> <body> <p>Welcome. You can click the button below to open a new tab</p> <button onclick="openNewWindow()">Open new tab</button> <button onclick="sendMessage()">Send message</button> <p id="response"></p> <script src="index.js"></script> </body> </html>
بیایید به صفحه sub.html برویم که بسیار شبیه به ایندکس خواهد بود:
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Sending messages</title> </head> <body> <p>I'm the sub page</p> <p id="response"></p> <p>Choose your response</p> <button onclick="closeWindow(`That's amazing`)">That's amazing</button> <button onclick="closeWindow(`Pretty cool`)">Pretty cool</button> <button onclick="closeWindow(`Meh, could be cooler`)"> Meh, could be cooler </button> <script src="index.js"></script> </body> </html>
انتقال پیام بین مرورگر ها با جاوا اسکریپت
برای این مقاله خاص، تصمیم گرفتم از یک فایل جاوا اسکریپت عمومی استفاده کنم. با این حال، می توانید آن را به دو فایل نیز تقسیم کنید.
بیایید فایل index.js را باز کنیم. اولین چیزی که می خواهیم اضافه کنیم باز شدن پنجره است:
let newWindow;
const openNewWindow = () => {
const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
newWindow = window.open('sub.html', 'sub', params);
};
سپس چندین پارامتر را به تابع window.open ارسال می کنیم:
- sub.html: صفحه ای که می خواهیم باز کنیم
- sub: نام صفحه ای که می خواهیم باز کنیم (می تواند هر چیزی باشد)
- params: گزینه هایی برای این پنجره جدید
همچنین ممکن است متوجه شده باشید که من این پنجره جدید را به عنوان یک متغیر تنظیم کردم. ما این کار را برای ارسال داده با دکمه دیگر انجام می دهیم.
برای ارسال داده ها به این پنجره جدید، باید تابع sendMessage را ایجاد کنیم:
const sendMessage = () => {
newWindow.postMessage({ foo: 'bar' }, '*');
};
این یک پیام جدید به پنجره حاوی یک ابجکت با مقادیر نوار foo: ارسال می کند.
اکنون می توانیم روی گیرنده کار کنیم. از آنجایی که ما از تابع postMessage استفاده کردیم، می‌توانیم در پیام‌های پنجره فعلی مشترک شویم.
برای انجام این کار، listener (شنونده) زیر را ایجاد کنید:
const response = document.getElementById('response');
window.addEventListener('message', (event) => {
if (event.data?.foo) {
response.innerText = event.data.foo;
}
});
این تابع به همه پیام ها گوش می دهد و اگر یکی با ابجکت foo وارد شود، متن پاسخ را روی آن مقدار تنظیم می کند.
بخش بعدی مربوط به ارسال داده ها به پنجره اصلی است. ما سه دکمه در فایل sub.html خود ایجاد کردیم که تابع closeWindow را فراخوانی می کند. بیایید جلو برویم و آن تابع را اضافه کنیم:
const closeWindow = (message) => {
window.opener.postMessage({ msg: message }, '*');
window.close();
};
و دوباره، می‌توانیم از تابع postMessage استفاده کنیم، اما این بار آن را در ‘Opener‘ فراخوانی می‌کنیم که به پنجره اصلی اشاره دارد.
اکنون اجازه دهید Event Listener (شنونده رویداد) خود را نیز برای رسیدگی به این پیام خاص تغییر دهیم:
window.addEventListener('message', (event) => {
if (event.data?.foo) {
response.innerText = event.data.foo;
}
if (event.data?.msg) {
response.innerText = event.data.msg;
}
});
و تمام! اکنون می توانید تب جدید با جاوا اسکریپت باز کرده و بین دو تب پیام ارسال کنید.