วิธีใช้ไอเฟรม

องค์ประกอบ iframe (ย่อมาจาก internal frame) ออกแบบมาเพื่อฝังเนื้อหาจากแหล่งอื่นๆ ลงในหน้า HTML ตัวอย่างเช่น ด้วยการใช้ iframe คุณไม่สามารถคิดเกี่ยวกับการสร้างเครื่องเล่นวิดีโอของคุณเองและจัดเก็บไฟล์วิดีโอขนาดใหญ่ได้ คุณสามารถใช้ YouTube และเพิ่มวิดีโอที่จำเป็นลงในเว็บแอปของคุณโดยใช้ iframe ได้

การใช้ iframe สำหรับวิดีโอ YouTube

ลองดูตัวอย่างที่เฉพาะเจาะจง มาสร้างเพจเพื่อดูวิดีโอจากช่อง YouTube ของ AppMaster เกี่ยวกับการใช้ไฟล์ในกระบวนการทางธุรกิจ ในการทำเช่นนี้ คุณต้องวางองค์ประกอบ iframe บนผืนผ้าใบ ระบุการตั้งค่าที่จำเป็น (เช่น ขนาดและการเยื้อง) และตั้งค่าลิงก์ไปยังวิดีโอที่ต้องการในช่อง Src

ในขณะเดียวกัน ในขั้นต้น YouTube ถือว่ามีความเป็นไปได้ในการฝังวิดีโอดังกล่าวและจัดเตรียมเครื่องมือที่จำเป็นเพื่อความสะดวกสูงสุดของกระบวนการ เมื่อคลิกที่ปุ่ม " Share " ใต้วิดีโอ คุณสามารถใช้ตัวเลือก " Embed "

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

การตั้งค่าความกว้างและความสูงเริ่มต้น - 560 และ 315 - จะปรากฏที่นี่เช่นกัน

คุณสามารถเผยแพร่แอปพลิเคชันและตรวจสอบให้แน่ใจว่าตอนนี้มีวิดีโอฝังอยู่จริงๆ

ในทำนองเดียวกัน คุณสามารถฝังข้อมูลประเภทอื่นจากแหล่งข้อมูลอื่นได้ ตัวอย่างเช่น เพิ่มแผนที่

จากการตั้งค่าเหล่านี้ คุณสามารถแสดงแผนที่เป็นวงกลมที่มีเส้นขอบประหนาได้

การใช้ HTML ที่กำหนดเองใน iframe

ลองพิจารณาตัวเลือกที่ซับซ้อนกว่านี้ เราจะสร้างหน้า html สำหรับ iframe โดยอิสระ และไม่ใช้ข้อมูลจากแหล่งที่มาของบุคคลที่สาม ในการทำเช่นนี้ ให้เพิ่มองค์ประกอบ RichtextEditor ลงในผืนผ้าใบ ช่วยให้คุณสร้าง HTML ได้ทั้งด้วยความช่วยเหลือของโปรแกรมแก้ไขภาพที่สะดวกและผ่านการแก้ไขโค้ด HTML โดยตรง

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

ในกระบวนการทางธุรกิจ คุณควร:

1. รับ HTML จากเอดิเตอร์โดยใช้บล็อก Richtext Get Properties
2. แปลง HTML เป็นไบต์ (เป็น To Bytes )
3. ใช้บล็อก Make File เพื่อสร้างไฟล์ โปรดทราบว่าในการสร้างไฟล์ คุณต้องมีเนื้อหา ( Bytes ซึ่งได้รับในขั้นตอนก่อนหน้า) และชื่อ (จะเป็นอะไรก็ได้ แต่ต้องติดตั้ง)
4. ส่งไฟล์ที่สร้างขึ้นไปยังเซิร์ฟเวอร์ และบันทึกลงในฐานข้อมูล ( Server request POST /_files/ )
5. รับ ID ของไฟล์ที่สร้าง ( Expand File - ID )
6. แปลง ID เป็นสตริง (เป็น To String )
7. รวบรวมลิงค์ไปยังไฟล์โดยใช้ Concat String ผลลัพธ์ควรเป็นลิงก์ เช่น https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ โดยที่ "vdjyien-app.apms.io" คือที่อยู่เซิร์ฟเวอร์ของคุณ และ "dQhJVTYrToCqr9G4KWKRD" คือไฟล์ ID ที่ได้รับในขั้นตอนที่แล้ว ลิงก์ผลลัพธ์ควรเปิดในเบราว์เซอร์ ตรวจสอบให้แน่ใจว่าจุดสิ้นสุดการรับไฟล์เอง ( GET /_files/:id/download/ ) ไม่ต้องการการให้สิทธิ์และเปิดให้เข้าถึงได้
8. หากลิงก์ตกลง สิ่งที่เหลืออยู่ก็คือส่งต่อไปยัง iframe และดูผลลัพธ์ ( iFrame Update Properties )

ตอนนี้ HTML ใด ๆ ที่สร้างใน Richtext Editor สามารถเก็บไว้ในฐานข้อมูลและแสดงในแอปพลิเคชัน ดังนั้น เมื่อใช้บล็อก iframe คุณสามารถเพิ่มองค์ประกอบในแอปพลิเคชันของคุณที่ผู้ออกแบบไม่ได้จัดเตรียมไว้ตั้งแต่แรก ใช้แบบอักษรที่ไม่ได้มาตรฐาน หรือสร้างบล็อกด้วยโค้ด HTML ที่กำหนดเอง