Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

iframe thích ứng trong Chrome 154

Sebastian Benz

Bramus

Ngày xuất bản: 16 tháng 9 năm 2026

Chrome 154 bổ sung tính năng hỗ trợ iframe có kích thước thích ứng, cho phép <iframe> tự điều chỉnh kích thước dựa trên kích thước vốn có của tài liệu được nhúng. Điều này rất phù hợp để nhúng liền mạch các tiện ích bình luận của bên thứ ba, nội dung nhúng trên mạng xã hội có chiều cao khác nhau hoặc bất kỳ loại nội dung nhúng nào khác sử dụng <iframe>.

Browser Support

Source

Các iframe có kích thước thích ứng sẽ thay thế một mẫu phổ biến, trong đó nhà phát triển đo lường nội dung iframe theo cách thủ công, gửi kích thước bằng postMessage() và cập nhật kích thước iframe theo cách thủ công trong trang nhúng.

Bản ghi này cho thấy một biểu mẫu bình luận được nhúng vào một trang bằng iframe. Khi người dùng thêm bình luận, chiều cao của iframe bên trong trang nhúng sẽ tự động cập nhật, tạo ra trải nghiệm hình ảnh liền mạch mà không có thanh cuộn.

Điều chỉnh kích thước của iframe cho phù hợp với nội dung

Theo mặc định, iframe có khung hiển thị riêng. Nếu tài liệu được nhúng cao hơn khung hiển thị đó, thì người dùng có thể thấy một thanh cuộn bổ sung. Với tính năng điều chỉnh kích thước khung nội tuyến thích ứng, trang nhúng có thể sử dụng tính năng điều chỉnh kích thước dựa trên nội dung:

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

Tài liệu được nhúng phải chọn sử dụng:

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

Sau đây là một ví dụ đầy đủ:

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

Và trong /comments.html:

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

Giờ đây, iframe có thể sử dụng chiều cao nội dung của tài liệu được nhúng thay vì hoạt động như một khung nhìn có chiều cao cố định.

Sử dụng `frame-sizing`

Thuộc tính frame-sizing mới kiểm soát kích thước nào được lấy từ nội dung của iframe.

Các giá trị được hỗ trợ bao gồm:

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

auto giữ nguyên hành vi định kích thước iframe hiện có.

Đối với hầu hết các chế độ viết theo chiều ngang, content-height và content-block-size là những giá trị hữu ích nhất cho các thành phần nhúng mở rộng theo chiều dọc.

Bạn cũng có thể kết hợp frame-sizing với các điều kiện ràng buộc CSS khác:

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

Đổi kích thước sau khi nội dung động thay đổi

Trình duyệt không liên tục quan sát mọi thay đổi về bố cục bên trong tài liệu được nhúng.

Nếu nội dung của iframe thay đổi sau bố cục ban đầu (ví dụ: sau khi tải thêm bình luận hoặc mở rộng một bảng điều khiển), thì tài liệu được nhúng có thể yêu cầu tính toán kích thước mới bằng window.requestResize().

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

Tốt nhất là bạn nên gọi window.requestResize() trước khi bố trí, sau khi đã thực hiện tất cả các thay đổi đối với tài liệu. Mô hình cập nhật rõ ràng này giúp tránh các vòng lặp thay đổi kích thước, trong đó việc thay đổi kích thước iframe sẽ thay đổi khung nhìn, từ đó thay đổi nội dung và thay đổi kích thước một lần nữa.

Nội dung nhúng khác nguồn gốc

Bạn cũng có thể sử dụng tính năng điều chỉnh kích thước thích ứng với iframe khác nguồn gốc. Tài liệu được nhúng có thể hạn chế những nguồn gốc được phép:

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

Thao tác này sẽ giới hạn kích thước thích ứng chỉ ở https://publisher.example. Nhiều nguồn gốc được phân tách bằng dấu cách: content="allow-origins=https://publisher1.example https://publisher2.example".

Đối với các tiện ích của bên thứ ba, hãy hạn chế quyền truy cập vào những nguồn cần đến tiện ích đó. Cơ chế này bổ sung cho các chế độ kiểm soát bảo mật iframe hiện có, chẳng hạn như chỉ thị frame-ancestors của Chính sách bảo mật nội dung, giúp kiểm soát những trang web có thể nhúng một trang.

Cải tiến tăng dần

Bạn có thể dùng truy vấn tính năng để giữ lại một phương án dự phòng hiện có cho những trình duyệt không hỗ trợ frame-sizing:

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

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

Nếu tài liệu được nhúng cập nhật linh hoạt, bạn cũng có thể phát hiện tính năng requestResize():

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

Do đó, mã đổi kích thước iframe hiện có có thể vẫn là giải pháp dự phòng trong khi phạm vi hỗ trợ mở rộng.

Dùng thử

Hãy thử điều chỉnh kích thước iframe thích ứng trong bản minh hoạ sau: