آیا می توانم از پنجره کودک به دامنه بازکن پنجره دسترسی پیدا کنم؟

سلام! من یک تأمین کننده بازکن پنجره هستم و اغلب در مورد جنبه فنی چیزها سؤالات جالبی از من پرسیده می شود. یک سؤالی که کاملاً مطرح می شود این است: "آیا می توانم از پنجره کودک به دامنه بازکن پنجره دسترسی پیدا کنم؟" بیایید به این موضوع شیرجه بزنیم و ببینیم چه چیزی است.

اول از همه ، بیایید به سرعت توضیح دهیم که DOM چیست. مدل Object Document یا DOM به طور خلاصه مانند یک درخت ساختار یافته از همه عناصر در یک صفحه وب است. این اجازه می دهد تا JavaScript با این عناصر تعامل داشته باشد و سبک ها ، محتوای آنها و غیره را تغییر دهد. اکنون ، وقتی در مورد یک پنجره پنجره و یک پنجره کودک صحبت می کنیم ، معمولاً با سناریوهایی که یک صفحه وب باز می شود ، سر و کار داریم.

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

همان - سیاست مبدا

قانون بزرگ در اینجا همان سیاست مبدا است. این یک اقدام امنیتی در مرورگرهای وب است که در صورت داشتن منشاء مختلف ، صفحه ای را از دسترسی به صفحه دیگر محدود می کند. منشأ اساساً ترکیبی از پروتکل (مانند HTTP یا HTTPS) ، دامنه (به عنوان مثال ، www.example.com) و شماره پورت است.

اگر بازکن پنجره و پنجره کودک منشأ یکسانی دارند ، همه چیز انعطاف پذیر تر می شود. به عنوان مثال ، اگر یک پنجره جدید را از وب سایت خود باز کنید ، پنجره کودک می تواند به DOM از پنجره بازکن دسترسی پیدا کند. شما می توانید ازپنجرهبرای انجام این کار در جاوا اسکریپت. در اینجا یک مثال ساده وجود دارد:

// در پنجره کودک اگر (windows.opener) {var OpenerDocument = windows.opener.document ؛ // اکنون می توانید به عناصر موجود در سند بازکن var someElement = OpenerDocument.getElementById ("برخی - id") دسترسی پیدا کنید. if (someElement) {someElement.style.color = 'Red' ؛ }}

اما اگر ریشه ها متفاوت باشند ، مرورگرها دسترسی را مسدود می کنند. این امر برای جلوگیری از سرقت اطلاعات حساس از سایت های دیگر است. به عنوان مثال ، اگر پنجره کودک را از سایت E - تجارت خود به یک دروازه پرداخت شخص ثالث باز کنید ، پنجره Gateway پرداخت نمی تواند به DOM سایت E - تجارت شما دسترسی پیدا کند.

چرا می خواهید به Dom of the Window بازکن دسترسی پیدا کنید؟

من به عنوان یک تأمین کننده بازکن پنجره ، می توانم به چند دلیل فکر کنم که ممکن است کسی بخواهد این کار را انجام دهد. بیایید بگوییم که شما در صفحه اصلی خود یک کاتالوگ محصول دارید و وقتی کاربر روی یک محصول کلیک می کند ، یک پنجره کودک را با اطلاعات دقیق تر باز می کند. ممکن است بخواهید پنجره کودک DOM صفحه اصلی را به روز کند تا نشان دهد که محصول مشاهده شده است یا آن را به لیست "اخیراً مشاهده شده" اضافه می کند.

مورد استفاده دیگر می تواند در یک ابزار پیکربندی باشد. شما یک پنجره کودک را باز می کنید تا یک محصول بازکن پنجره را پیکربندی کنید ، مانندسوئیچ کور موتوریبشر هنگامی که کاربر پیکربندی را در پنجره کودک به پایان رساند ، می توانید از دسترسی به DOM از بازکن پنجره استفاده کنید تا صفحه اصلی را با گزینه های پیکربندی انتخاب شده به روز کنید.

رسیدگی به صلیب - موقعیت های مبدا

اگر نیاز به دسترسی به دامنه بازکن پنجره در یک وضعیت صلیب دارید ، چند راه حل وجود دارد. یک گزینه استفاده از API Postmessage است. این اجازه می دهد تا ویندوز با ریشه های مختلف به روشی ایمن ارتباط برقرار کند.

ایده اصلی این است که یک پنجره می تواند با استفاده از پنجره دیگر پیام ارسال کندبعد از ظهرروش ، و پنجره دریافت می تواند با استفاده از این پیام ها گوش کندWindow.AddeventListener ("پیام" ، پاسخ به تماس)رویداد

در اینجا نحوه عملکرد آن آورده شده است:

// در Window Window var Targetorigin = 'https://www.example.com' ؛ Window.Opener.PostMessage ("برخی از داده های پنجره کودک" ، Targetorigin) ؛ // در پنجره بازکن پنجره. addeventlistener ('پیام' ، عملکرد (رویداد) {if (event.origin === 'https: // کودک - پنجره - domain.com') {console.log ('پیام دریافت شده:' ، event.data) ؛}}) ؛

به این ترتیب ، شما می توانید داده ها را بین دو ویندوز بدون دسترسی مستقیم به DOM ، که توسط همان خط مشی اصلی مسدود شده است ، تبادل کنید.

واقعی - نمونه های جهان در تجارت بازکن پنجره

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

برای به روزرسانی تعداد صفحه اصلی برای آن محصول می توانید از دسترسی DOM (در صورت امکان) استفاده کنید. یا اگر پنجره کودک دارای دکمه "افزودن به سبد خرید" است ، می توانید از دسترسی به بروزرسانی نماد سبد خرید در صفحه اصلی استفاده کنید.

اگر Cross - Origin یک مسئله است ، هنوز هم می توانید از API Postmessage استفاده کنید. به عنوان مثال ، پنجره کودک می تواند پیامی را به صفحه اصلی ارسال کند که می گوید یک محصول به سبد خرید اضافه شده است. صفحه اصلی می تواند تعداد سبد خرید را به روز کرده و یک پیام تأیید را نشان دهد.

خط پایین

بنابراین ، آیا می توانید از پنجره کودک به دامنه بازکن پنجره دسترسی پیدا کنید؟ این به همان سیاست - مبدا بستگی دارد. اگر ریشه ها یکسان هستند ، می توانید از آن استفاده کنیدپنجرههدف برای دسترسی به DOM. اگر اینطور نیست ، برای برقراری ارتباط بین ویندوز باید از API Postmessage استفاده کنید.

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

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

منابع

• اسناد وب MDN - همان - سیاست مبدا
• MDN Web Docs - Window.PostMessage ()
• W3Schools - شیء پنجره JavaScript