iframe resizer

การแนะนำ

ไลบรารี iframe-resizer มีจุดมุ่งหมายเพื่อขจัดปัญหาจากการใช้ iframe มันจะปรับขนาด iframe ของคุณให้ตรงกับขนาดเนื้อหาของคุณ จากนั้นตรวจสอบ iframe เพื่อให้แน่ใจว่ามีขนาดที่สมบูรณ์แบบเสมอ

การปรับขนาดที่เชื่อถือได้

เนื่องจากเบราว์เซอร์ไม่มีวิธีการคำนวณขนาดเนื้อหาที่เชื่อถือได้สม่ำเสมอ iframe-resizer จะตรวจสอบหน้าเว็บของคุณโดยอัตโนมัติ และเลือกค่าที่ดีที่สุดสำหรับเนื้อหาของคุณทุกครั้งที่ตรวจพบสิ่งที่เปลี่ยนแปลง

ประสิทธิภาพสูง

เพื่อให้มั่นใจว่าผลกระทบต่อไซต์ของคุณน้อยที่สุด iframe-resizer ได้รับการปรับให้เหมาะสมสูงสุดและใช้ ทฤษฎีเซต เพื่อให้แน่ใจว่าจะตรวจสอบเฉพาะองค์ประกอบของหน้าที่ส่งผลต่อขนาดของ iframe ของคุณ

แม้แต่ในหน้าเว็บที่ซับซ้อนที่สุด iframe-resizer ยังสามารถตรวจจับการเปลี่ยนแปลงทั้ง HTML และ CSS คำนวณขนาดเนื้อหาที่แก้ไข และอัปเดต iframe ในเวลาต่ำกว่ามิลลิวินาที

ข้ามโดเมน

รองรับ iframe ทั้งภายใน (โดเมนเดียวกัน) และภายนอก (ข้ามโดเมน) ผ่านไฟล์ JS แบบธรรมดาที่ออกแบบมาเพื่อให้แขกไม่ได้รับผลกระทบใดๆ บนไซต์ที่โฮสต์มัน

API แบบขยาย

นอกจากนี้ iframe-resizer ยังมีคุณลักษณะ API ของเบราว์เซอร์ที่ขาดหายไป ซึ่งช่วยให้คุณสามารถรวมเนื้อหา iframe ของคุณเข้ากับหน้าระดับบนสุดได้อย่างปลอดภัย

• เลื่อนหน้าโดยสัมพันธ์กับตำแหน่งของ iframe หรือหน้าหลัก
• รับรายละเอียดตำแหน่งของ iframe ตำแหน่งการเลื่อน และวิวพอร์ตของเพจหลัก
• แก้ไขการลิงก์เพจใน iframe และอนุญาตให้ลิงก์เผยแพร่ไปยังเพจหลัก
• เพิ่มเหตุการณ์ onMouseEnter และ onMouseLeave ให้กับองค์ประกอบ iframe
• ข้อความที่ง่ายขึ้นระหว่าง iframe และหน้าหลัก
• การรับรองความถูกต้องของโดเมนอัตโนมัติ
• การเข้าถึงขั้นสูง

เมื่อรวมกับ viewer.js จะสามารถปรับขนาด iframe ที่มีเอกสาร PDF และ ODF ได้

คู่มือการตั้งค่าและ API

โปรดดูเว็บไซต์ iframe-resizer สำหรับคำแนะนำในการตั้งค่าและเอกสารประกอบ API ซึ่งรวมถึงเวอร์ชันสำหรับ:

• วานิลลา เจ.เอส
• ตอบสนอง
• วิว
• เชิงมุม
• jQuery

พร้อมด้วยคำแนะนำในการตั้งค่าสำหรับ:

• เวิร์ดเพรส
• สคริปต์ของ Google Apps

พวกเขายังเป็น API เพื่อรองรับการสร้างส่วนประกอบที่กำหนดเองเพิ่มเติม

เวอร์ชัน 5

iframe-resizer เวอร์ชันนี้ได้รับการเขียนใหม่อย่างกว้างขวางเพื่อใช้ API ของเบราว์เซอร์สมัยใหม่ ซึ่งช่วยให้มีประสิทธิภาพดีขึ้นอย่างเห็นได้ชัด และแม่นยำยิ่งขึ้นในการตรวจหาเหตุการณ์การปรับขนาดเนื้อหา

ด้วยการเปิดตัวครั้งนี้ มีโอกาสที่จะรีเฟรชและทำให้ API ง่ายขึ้น หากคุณมาจากเวอร์ชันก่อนหน้า คู่มืออัปเกรดก็จะมีไว้เพื่ออธิบายการเปลี่ยนแปลง

แพ็คเกจหลัก

สำหรับเวอร์ชัน 5 iframe-resizer จะแบ่งออกเป็นสองแพ็คเกจหลักเพื่อให้ง่ายต่อการปรับใช้ข้ามโดเมนที่แตกต่างกัน และรองรับการสั่นของต้นไม้ได้ดีขึ้น แพ็คเกจทั้งสองนี้สามารถติดตั้งได้จาก NPM หรือดาวน์โหลดเป็นไฟล์ zip

@ iframe-resizer/parent

แพ็คเกจเพจหลักจะตั้งค่า iframe สำหรับการปรับขนาดเนื้อหาอัตโนมัติ เป็นเวอร์ชันของแพ็คเกจนี้สำหรับไลบรารีและเฟรมเวิร์กยอดนิยมหลายแห่ง (ดูด้านล่าง)

@ iframe-resizer/child

แพ็คเกจนี้จำเป็นต้องโหลดลงใน iframe โดยจะรอข้อความจากหน้าหลักอย่างเงียบ ๆ ก่อนที่จะเริ่มต้น มันถูกออกแบบให้เป็นแขกที่ดีในไซต์อื่น

กรอบงานและไลบรารี

นอกเหนือจากแพ็คเกจหลักสองแพ็คเกจแล้ว แพ็คเกจเหล่านั้นยังเป็นเวอร์ชันหลักของแพ็คเกจสำหรับแพลตฟอร์มต่อไปนี้

@ iframe-resizer/react

องค์ประกอบ React สำหรับหน้าหลัก

@ iframe-resizer/vue

คอมโพเนนต์ Vue สำหรับเพจหลัก

@ iframe-resizer/jquery

wrapper jQuery อย่างง่ายสำหรับหน้าหลัก

เอพีไอ

@ iframe-resizer/core

API หลักสำหรับหน้าพาเรนต์ ซึ่งใช้โดย @iframe-resizer/parent รวมถึงเวอร์ชันเฟรมเวิร์กและคอมโพเนนต์ไลบรารี

---

ลิขสิทธิ์ © 2013-24 David J. Bradshaw - ได้รับอนุญาตภายใต้ GPL V3