วิธีและเวลาในการใช้ Iframes (เฟรมแบบอินไลน์)

Anonim

เฟรมแบบอินไลน์มักเรียกกันว่า "iframe" เป็นเฟรมเดียวที่ได้รับอนุญาตใน HTML5 เฟรมเหล่านี้เป็นส่วนหลักของหน้าเว็บที่คุณ "ตัดออก" ในพื้นที่ที่คุณตัดออกจากหน้าเว็บคุณสามารถป้อนข้อมูลในหน้าเว็บภายนอกได้ ในสาระสำคัญ iframe เป็นหน้าต่างเบราว์เซอร์อื่นที่อยู่ในหน้าเว็บของคุณ คุณกำหนดค่า iframe ที่ใช้ทั่วไปในเว็บไซต์ที่ต้องมีเนื้อหาภายนอกเช่นแผนที่ Google หรือวิดีโอจาก YouTube ทั้งสองเว็บไซต์ยอดนิยมใช้ iframes ในโค้ดฝัง

วิธีการใช้องค์ประกอบ IFRAME

องค์ประกอบใช้องค์ประกอบระดับโลก HTML5 รวมทั้งองค์ประกอบอื่น ๆ สี่เป็นคุณลักษณะใน HTML 4.01:

  • - URL สำหรับแหล่งที่มาของเฟรม
  • - ความสูงของหน้าต่าง
  • - ความกว้างของหน้าต่าง
  • - ชื่อของหน้าต่าง

และสามรูปแบบใหม่ใน HTML5:

  • srcdoc- HTML สำหรับแหล่งที่มาของเฟรม แอตทริบิวต์นี้มีความสำคัญมากกว่า URL ใด ๆ ใน src คุณลักษณะ
  • Sandbox- รายการคุณลักษณะที่ควรได้รับอนุญาตหรือไม่อนุญาตในกรอบหน้าต่าง
  • ไม่มีรอยต่อ- บอกกล่าวให้ผู้ใช้งานทราบว่า iframe ควรได้รับการแสดงผลเช่นเดียวกับส่วนที่มองไม่เห็นได้ของเอกสารหลัก

ในการสร้าง iframe แบบเรียบง่ายคุณต้องตั้งค่า URL ต้นทางและความกว้างและความสูง:

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

นอกจากนี้ยังมีคุณลักษณะบางอย่างที่ถูกต้องใน HTML 4.01 แต่ล้าสมัยใน HTML5 เนื่องจากเว็บไซต์ส่วนใหญ่ในปัจจุบันใช้ HTML5 + แอตทริบิวต์เหล่านี้เป็นส่วนที่คุณไม่ต้องการใช้ (แต่ที่คุณอาจเห็นในเอกสารเก่าบางส่วน)

  • - ใช้ a องค์ประกอบเพื่อเชื่อมโยงกับคำอธิบาย
  • ใช้ CSS แทน ลอย คุณสมบัติ
  • allowtransparencyใช้ CSS แทน พื้นหลัง คุณสมบัติเพื่อทำให้ ifram โปร่งใส
  • ใช้คำว่า ชายแดน คุณสมบัติ CSS
  • marginheightใช้ CSS แทน ขอบ คุณสมบัติ
  • marginwidthใช้ CSS แทน ขอบ คุณสมบัติ
  • ใช้ CSS แทน ล้น คุณสมบัติ

การสนับสนุนเบราว์เซอร์ IFRAME

IFRAME องค์ประกอบได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด:

  • Android
  • โครเมียม
  • Firefox
  • Internet Explorer 2 ขึ้นไป
  • iOS / Safari มือถือ
  • Netscape 7 ขึ้นไป
  • Opera 3+
  • การแข่งรถวิบาก

หากไม่มีหมายเลขเวอร์ชันใด ๆ ที่แสดงในรายการข้างต้นนั่นเป็นเพราะว่าเบราว์เซอร์รุ่นนั้นสนับสนุนเวอร์ชันทั้งหมด

สิ่งหนึ่งที่ต้องคำนึงถึงคือในขณะที่เบราว์เซอร์ทั้งหมดสนับสนุน IFRAME องค์ประกอบยังมีข้อ จำกัด บางประการสำหรับคุณลักษณะบางอย่างของ HTML5

  • การใช้ ล้น เพื่อปิดการเลื่อนไม่น่าเชื่อถือ ถ้าคุณไม่ต้องการแถบเลื่อนบน iframes คุณควรใช้ เลื่อน คุณลักษณะ
  • srcdoc, Sandbox, และ ไม่มีรอยต่อ คุณลักษณะนี้ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์ใด ๆ ในขณะนี้

การเชื่อมโยงกับ Iframes

เมื่อคุณให้ iframes ของคุณ a ชื่อ หรือ รหัส จากนั้นคุณสามารถชี้ลิงค์ของคุณที่กรอบที่มีแอตทริบิวต์ใน ธาตุ. จากนั้นเมื่อผู้ใช้คลิกที่ลิงก์ลิงก์จะเปิดขึ้นภายใน iframe ที่อ้างอิงแทนที่จะเป็นหน้าต่างปัจจุบัน

ลองด้วยตัวคุณเอง พิมพ์ข้อมูลต่อไปนี้ลงในหน้าเว็บ:

id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">

นี่คือ iframe ของฉัน

เมื่อคุณคลิกลิงก์นี้จะเปิดเอกสารใหม่ภายในหน้าต่างด้านบน

หากเอกสารเปิดอยู่ใน IFRAME ไม่มีการกำหนดเป้าหมายใด ๆ ลิงก์ทั้งหมดเหล่านี้จะเปิดใน iframe เดียวกันกับเอกสารหลัก

คุณสามารถใช้คุณลักษณะนี้เพื่อสร้างลิงก์ในที่นี้ได้ IFRAME เปลี่ยนเนื้อหาของอีกคนหนึ่ง IFRAME ในหน้าเดียวกัน

IFrames และความปลอดภัย

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

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

สิ่งที่ต้องจำเมื่อรวม a IFRAME บนหน้าเว็บของคุณคือผู้ใช้ของคุณปลอดภัยเท่ากับเนื้อหาของเว็บไซต์ทั้งหมดที่คุณเชื่อมโยงเท่านั้น หากคุณมีเหตุผลที่จะรู้สึกว่าเว็บไซต์ไม่น่าไว้วางใจอย่าเชื่อมโยงกับเว็บไซต์ใด ๆ และส่วนใหญ่ไม่รวมถึงเนื้อหาในไซต์ IFRAME. การเชื่อมโยงไปยังหน้าเว็บของคุณภายใน iframe ไม่ก่อให้เกิดความเสี่ยงด้านความปลอดภัยสำหรับคุณหรือผู้ใช้ของคุณ

บทความต้นฉบับโดย Jennifer Krynin แก้ไขเมื่อวันที่ 11/7/16 โดย Jeremy Girard

ตัวเลือกของบรรณาธิการ