بسیاری از ما در مشاغل توسعه وب با Iframes همکاری کرده ایم. آنها در همه جا هستند ، و در حالی که معمولاً برای اجرای آنها نسبتاً ساده هستند ، یک عجیب و غریب کوچک اشکال ناوبری است.
امروز من در حال اجرای یک iframe در یک مؤلفه React بودم و این مشکل به وجود آمد. آنچه من در این پست نشان می دهم ، استفاده از Reactjs است ، اما JS نیز ارائه می شود.
مؤلفه من یک iframe را ارائه می دهد ، و دکمه هایی در UI وجود دارد که به کاربر امکان می دهد URL SRC IFRAME را تغییر دهد. این تغییرات SRC به روزرسانی های ایالتی بود ، نه ناوبری ، با این حال تغییر Iframe SRC به تاریخچه مرورگر اضافه می کرد که گویی برنامه من در حال پیمایش است و این باعث شده است که دکمه پشت مرورگر من یک دسته از تاریخ آشغال ها را برگرداند. کاربر من از صفحه A به صفحه B رفت تا Iframe را ببیند و از دکمه ها برای تغییر SRC برای محتوای مختلف استفاده کند ، و هنگامی که آنها دکمه پشت مرورگر را زدند ، انتظار دارند که مستقیماً به صفحه A. بروند. آنچه در واقع اتفاق می افتد این است که هر سوئیچ در SRC اضافه نمی کند ، بلکه یک ورودی به تاریخچه اضافه می کند ، بنابراین کاربر مجبور است کلیک کند ، و کلیک کند ، و کلیک کند ، و چه اتفاقی می افتد ….؟ آنچه آنها دیدند این بود که iframe در حال تغییر است ، تغییر نمی کند ، تغییر می کند ، تغییر نمی کند. به طور خلاصه ، یک آشفتگی!
بیشتر کاربران می دانند که این یک نیروی دریایی برگشت از طریق تغییر Iframe بوده و فکر می کند “اما چرا یک خالی اضافی وجود دارد/هیچ چیزی بین آن کلیک می کند؟ و چرا ما حتی به آن ناوبری های تغییر Iframe احتیاج داریم؟
من در مورد ساختن یک دکمه عقب در صفحه فکر کردم که کاربر را مستقیماً به صفحه ای که انتظار داشتند از آن بازگردد ، بازگرداند ، اما این چیزی در تاریخ تغییر نکرد. سرانجام آنها باید از آن آشغال عبور کنند ، مگر اینکه کاملاً به ناوبری درون برنامه بپردازند. این با من مشکلی ندارد. باید راهی برای رفع این حق وجود داشته باشد؟ در ادامه بخوانید!
با Iframes ما به ContentWindow اشاره داریم. پنجره محتوا شیء پنجره سند در داخل Iframe است. Window.Location می تواند باشد جایگزین در تاریخ ، اضافه کردن لازم نیست. آیا می توانم این دو ایده را کنار هم قرار دهم و مشکل خود را حل کنم؟ بله این برای من کار کرد ، بنابراین لطفاً آن را امتحان کنید.
ابتدا با قلاب Useref به Iframe خود اضافه کردم. اگر با Useref آشنا نیستید ، هنوز پیشنهاد می کنم آن را بررسی کنید ، اما این یک روش رایج است که توسعه دهندگان React از استفاده از روش های Document.getElement خودداری می کنند. من Ref خود را به iframe خود اضافه می کنم:
کد برای تغییر SRC یک عبارت سوئیچ ساده در تابعی است که با کلیک دکمه ایجاد می شود. پس از به روزرسانی مقدار Newsrcurl در هر سوئیچ ، کدی که این مشکل ناوبری را حل می کند:
iframe.current.contentWindow.location.replace(newSrcURL)
هنگامی که از قلاب Useref استفاده می کنید ، با .Current به عنصر خود دسترسی پیدا می کنید. بنابراین iframeref.current در بالا برابر است با:
document.getElementById('vidFrame')
سپس ما به ContentWindow دسترسی پیدا می کنیم و از مکان استفاده می کنیم. تعویض کردن مکان به جای فشار آوردن به تاریخ.
نتیجه این است که کاربر شما می تواند از /صفحه-A به /صفحه-B (با IFRAME) برود ، SRC را به همان اندازه که می خواهد تغییر دهید ، به مرورگر ضربه بزنید و مستقیم به /صفحه-A بروید. توجه داشته باشید که iframe من دیگر به طور مستقیم به حالت گره خورده است. JSX Iframe دارای SRC به عنوان “درباره: خالی” است.
iframe من از محتوای سرورهای شخص ثالث ، BTW استفاده می کند ، در صورتی که برخی از شما فکر می کنید که به همین دلیل این کار برای شما مؤثر نخواهد بود. فکر خوب ، اما این کار می کند!
من از شنیدن نظرات و افکار شما خوشحالم و به من اطلاع می دهم که آیا این برای شما مفید است!
