ในการพัฒนาส่วนหน้าเว็บเรามักจะใช้การควบคุม IFRAME
อย่างไรก็ตามเมื่อควบคุมการโต้ตอบภายในและภายนอกคำหลักที่ใช้โดยแต่ละเบราว์เซอร์จะแตกต่างกันซึ่งเป็นปัญหามาก เพื่อให้ได้วัตถุหน้าต่างในส่วนย่อยย่อยเบราว์เซอร์แต่ละตัวมีข้อกำหนดของตัวเองบางส่วนเป็นหน้าต่างบางส่วนเป็นเนื้อหาที่มีเนื้อหาและอื่น ๆ และอาจมีบางอย่างที่เราไม่รู้
อย่างไรก็ตามเพียงแค่เข้าถึงหน้าเลเยอร์พาเรนต์จากหน้าเด็กและในรูปแบบดั้งเดิมทุกคนเป็น window.parent
จากนั้นผ่านคุณสมบัตินี้เราสามารถส่งวัตถุหน้าต่างของเราเองไปยังหน้าหลักในหน้าเด็กเพื่อให้หน้าหลักสามารถเข้าถึงหน้าเด็กได้อย่างง่ายดายและเราไม่ต้องกังวลเกี่ยวกับวิธีรับวัตถุหน้าต่างจากวัตถุ iframe อีกต่อไป
โดยไม่พูดอะไรเลยลองดูรหัสก่อน:
รหัสหน้าหลัก:
window.iframewindow = null; function frameready (subwindow) {window.iframewindow = subwindow; //งานที่มอบหมาย}; <iframe src = "xx"> </iframe>รหัสหน้าย่อย:
$ (function () {window.parent.frameready (หน้าต่าง);});ผ่านรหัสง่าย ๆ ด้านบนคุณสามารถเข้าถึงวัตถุ iframewindow ในหน้าหลักและรับวัตถุหน้าต่างของหน้าเด็กโดยตรงซึ่งไม่มีความฉลาดและมีประโยชน์มาก
ถ้าฉันมี iframes หลายตัวล่ะ?
สถานการณ์นี้จะซับซ้อนกว่าเล็กน้อย แต่ก็ไม่สำคัญ เราต้องการใช้โซลูชันข้างต้นต่อไปดังนั้นให้วิเคราะห์สถานการณ์ปัจจุบัน:
1. เราควรต้องการวัตถุคอลเลกชันที่คล้ายกับ iframewindows เพื่อจัดการวัตถุหน้าต่างสำหรับหน้าย่อยทั้งหมด
2. เมื่อหน้าเด็กแต่ละหน้าเรียก parent.frameready มันจะต้องพึ่งพาชื่อที่ไม่ซ้ำกันสำหรับหน้าหลักเพื่อให้เราสามารถเข้าถึง iframe แต่ละตัวได้อย่างแม่นยำในหน้าหลัก
ตอนนี้มันง่าย สิ่งที่ต้องทำคืออะไรคือไม่มีอะไรมากไปกว่าชื่อหมายเลข ฯลฯ ลองดูที่รหัสกัน
window.subwindowname = "helloWorldWindow"; $ (ฟังก์ชั่น () {window.parent.frameready (window.subwindowname, หน้าต่าง);});แล้วสิ่งที่หน้าหลักต้องทำคือ Refactor Frameready และเพิ่มพารามิเตอร์
window.iframewindows = {}; // นี่กลายเป็นฟังก์ชันวัตถุ frameready (ชื่อ, หน้าต่าง) {window.iframewindows [ชื่อ] = window;}; ฟังก์ชั่น getSubwindow (ชื่อ) {return window.iframewindows [ชื่อ];}สรุป:
หน้าสร้างด้วยรูปแบบนี้มีข้อดีดังต่อไปนี้:
1. การทำงานร่วมกันของหน้าหลักขึ้นอยู่กับคำหลักหลักเท่านั้น (และในวิธีก่อนหน้านี้พวกเขาไม่เพียง แต่ขึ้นอยู่กับผู้ปกครอง แต่ยังอยู่ในเนื้อหา Window หน้าต่างและคำหลักที่ไม่แน่นอนอื่น ๆ สิ่งที่สำคัญที่สุดคือการสนับสนุนผู้ปกครองยังคงดีมาก)
2. วัตถุหน้าต่างแบบครบวงจรลดห่วงโซ่อ้างอิงที่ร้องขอทุกครั้งที่ใช้และปรับปรุงความเร็วในการทำงาน
3. จุดที่สำคัญที่สุด: มันคือรหัสนั้นง่ายต่อการเขียน
ด้านบนเป็นวิธีแก้ปัญหาการโต้ตอบและความเข้ากันได้ของ JavaScript Iframe กับเบราว์เซอร์ต่างๆที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!