Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

iframe ที่ปรับเปลี่ยนตามอุปกรณ์ใน Chrome 154

Sebastian Benz

Bramus

เผยแพร่เมื่อ: 16 กันยายน 2569

Chrome 154 เพิ่มการรองรับ iframe ที่ปรับขนาดตามอุปกรณ์ ซึ่งช่วยให้ <iframe> สามารถปรับขนาดเองตามขนาดที่แท้จริงของเอกสารที่ฝัง ซึ่งเหมาะอย่างยิ่งสำหรับการฝังวิดเจ็ตความคิดเห็นของบุคคลที่สาม การฝังโซเชียลมีเดียที่มีความสูงแตกต่างกัน หรือการฝังประเภทอื่นๆ ที่ใช้ <iframe>

Browser Support

Source

iframe ที่ปรับขนาดตามอุปกรณ์จะแทนที่รูปแบบทั่วไปที่นักพัฒนาซอฟต์แวร์วัดเนื้อหา iframe ด้วยตนเอง ส่งขนาดด้วย postMessage() และอัปเดตขนาด iframe ในหน้าฝังด้วยตนเอง

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

ปรับขนาด iframe ให้พอดีกับเนื้อหา

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

.embed {
  width: 100%;
  frame-sizing: content-height;
}

เอกสารที่ฝังต้องเลือกใช้โดยทำดังนี้

<meta name="responsive-embedded-sizing" content="allow-origins=*">

ตัวอย่างแบบเต็มมีดังนี้

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

และใน /comments.html

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

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

ใช้ `frame-sizing`

frame-sizing พร็อพเพอร์ตี้ใหม่จะควบคุมว่าควรดึงมิติข้อมูลใดจากเนื้อหาของ iframe

ค่าที่รองรับมีดังนี้

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto จะยังคงลักษณะการกำหนดขนาด iframe ที่มีอยู่

สำหรับโหมดการเขียนแนวนอนส่วนใหญ่ content-height และ content-block-size เป็นค่าที่มีประโยชน์ที่สุดสำหรับการฝังที่ขยายในแนวตั้ง

นอกจากนี้ คุณยังรวม frame-sizing กับข้อจำกัดอื่นๆ ของ CSS ได้ด้วย

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

การปรับขนาดหลังจากเนื้อหาแบบไดนามิกเปลี่ยนแปลง

เบราว์เซอร์ไม่ได้สังเกตการเปลี่ยนแปลงเลย์เอาต์ทุกครั้งภายในเอกสารที่ฝัง

หากเนื้อหาของ iframe เปลี่ยนแปลงหลังจากเลย์เอาต์เริ่มต้น เช่น หลังจากโหลดความคิดเห็นเพิ่มเติมหรือขยายแผง เอกสารที่ฝังจะขอการคำนวณขนาดใหม่ได้ด้วย window.requestResize()

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

คุณควรเรียกใช้ window.requestResize() ก่อนเลย์เอาต์ หลังจากทำการเปลี่ยนแปลงเอกสารทั้งหมดแล้ว โมเดลการอัปเดตที่ชัดเจนนี้ช่วยหลีกเลี่ยงลูปการปรับขนาดที่การเปลี่ยนขนาด iframe จะเปลี่ยนวิวพอร์ต ซึ่งจะเปลี่ยนเนื้อหา และเปลี่ยนขนาดอีกครั้ง

การฝังแบบข้ามต้นทาง

นอกจากนี้ยังใช้การปรับขนาดแบบปรับเปลี่ยนตามอุปกรณ์กับ iframe แบบข้ามต้นทางได้ด้วย เอกสารที่ฝังจะจำกัดต้นทางที่ได้รับอนุญาตได้ดังนี้

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

ซึ่งจะจำกัดการปรับขนาดที่ตอบสนองตามพื้นที่โฆษณาให้เหลือเพียง https://publisher.example หากมีหลายต้นทาง ให้คั่นด้วยการเว้นวรรค content="allow-origins=https://publisher1.example https://publisher2.example"

สำหรับวิดเจ็ตของบุคคลที่สาม ให้จำกัดการเข้าถึงต้นทางที่จำเป็น กลไกนี้ช่วยเสริมการควบคุมความปลอดภัยของ iframe ที่มีอยู่ เช่น คำสั่ง frame-ancestors ของนโยบายความปลอดภัยของเนื้อหา ซึ่งควบคุมเว็บไซต์ที่ฝังหน้าเว็บได้

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

คุณสามารถใช้การค้นหาฟีเจอร์เพื่อใช้ฟอลแบ็กที่มีอยู่สำหรับเบราว์เซอร์ที่ไม่รองรับ frame-sizing ได้ดังนี้

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

หากเอกสารที่ฝังมีการอัปเดตแบบไดนามิก คุณจะตรวจหาฟีเจอร์ requestResize() ได้ด้วย

if ("requestResize" in window) {
  window.requestResize();
}

ดังนั้นโค้ดการปรับขนาด iframe ที่มีอยู่จึงยังคงเป็นตัวเลือกสำรองได้ในขณะที่การรองรับขยายออกไป

ลองใช้

ลองใช้การปรับขนาด iframe แบบปรับเปลี่ยนตามอุปกรณ์ได้ในการสาธิตต่อไปนี้