جاوااسکریپت

ارسال اطلاعات بین window ها در جاوااسکریپت

0
Please log in or register to do it.

سلام رفقا حالتون چطوره؟ من امیدم و امروز با ی مقاله سمی دیگه در خدمتون هستم😊🤣

سرتون رو درد نیارم و سریع برم سراغ اصل مطلب. راستش من این چند روزه روی ی پروژه ای بودم که نیاز داشتن با کلیک روی یک دکمه، یک پنجره جدید براشون باز بشه و یک پیغامی به اون پنجره ارسال بشه و مجدد بتونن همین کار رو برعکس هم انجام بدن یعنی اطلاعاتی رو از پنجره ایجاد شده به پنجره قبلی ارسال کنند.

میدونم این ی کار غیراصولی (مسخره) است ولی خب درخواست مشتریه دیگه ما هم گفتیم چشم😁

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

بعد داخل این پنجره جدید ۳ تا دکمه قرار میدیم که کاربر نسبت به پیام دریافتیش یکی از اونهارو انتخاب کنه و اون رو به مبدا که همون پنجره اصلی میشه رو ارسال کنه.

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

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

راه اندازی فایل ها و ساختار پروژه

همونطور که در بالا گفتم من سعی کردم ی مثال خیلی ساده بزنم برای همین نیاز به ساختار پیچیده نداریم و شما فقط ی پوشه ایجاد کنید و فایل های زیر رو داخلش ایجاد کنید

  • 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 رو باز کنید که اینم خیلی شبیه به index.html و کد زیر رو داخلش قرار بدین

<!DOCTYPE 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>

ارسال پیام بین پنجره ها در جاوااسکریپت

برای این پروژه تصمیم گرفتم از یک فایل js استفاده کنم ولی اگه شما مایل بودین میتونید کد هارو جدا کنید و در فایل های جداگانه استفاده کنید.

خب فایل 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:’bar’} به صفحه جدید ارسال بشه.

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

برای اینکار از کد زیر استفاده میکنیم

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 استفاده کنیم، اما این بار اون رو در بازکننده فراخوانی می‌کنیم که به پنجره اصلی اشاره داره.

حالا اجازه بدین شنونده رویداد خودش رو هم برای رسیدگی به این پیام خاص تغییر بده

window.addEventListener('message', (event) => {
  if (event.data?.foo) {
    response.innerText = event.data.foo;
  }
  if (event.data?.msg) {
    response.innerText = event.data.msg;
  }
});

و هووورا😊😁. الان میتونیم بین دو window در جاوااسکریپت اطلاعات رو رد و بدل کنیم

اگه هم خواستین میتونید کد های این پروژه رو در گیت هاب من مشاهده کنید.

ممنون از مطالعه این مقاله

روش NatSpec در Solidity
5 ابزار لینوکس برای بهبود گردش کار برنامه نویسی شما

Reactions

1

فعلا کسی لایک نکرده

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *