Thẻ HTML <iframe>

Định nghĩa và cách sử dụng thẻ HTML <iframe>

Thẻ <iframe> chỉ định một inline frame. Một iframe được sử dụng để nhúng một tài liệu khác trong tài liệu HTML hiện tại.

Một iframe nội tuyến được đánh dấu như sau:

<iframe src="https://www.quantrimang.com" title="Quản Trị Mạng Kiến Thức Công Nghệ Khoa Học và Cuộc Sống"></iframe>

Mẹo:

  • Sử dụng CSS để tạo kiểu cho <iframe> (xem ví dụ bên dưới).
  • Bạn nên luôn bao gồm thuộc tính tiêu đề cho <iframe>. Điều này được sử dụng bởi trình đọc màn hình để đọc nội dung của <iframe> là gì.

Hỗ trợ trình duyệt

Phần tử
<iframe>
Google ChromeMS EdgeFirefoxSafariOpera

Các thuộc tính

Thuộc tínhGiá trịMô tả
allowChỉ định chính sách tính năng cho <iframe>
allowfullscreentrue
false
Đặt thành true nếu <iframe> có thể kích hoạt chế độ toàn màn hình bằng cách gọi phương thức requestFullscreen()
allowpaymentrequesttrue
false
Đặt thành true nếu <iframe> có nguồn gốc chéo được phép gọi API yêu cầu thanh toán
heightpixelsChỉ định chiều cao của <iframe>. Chiều cao mặc định là 150 pixel
loadingeager
lazy
Chỉ định xem trình duyệt nên load iframe ngay lập tức hay trì hoãn load iframe cho đến khi một số điều kiện được đáp ứng
nametextChỉ định tên của <iframe>
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
Chỉ định thông tin liên kết giới thiệu nào sẽ gửi khi tìm nạp iframe
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Kích hoạt một tập hợp các hạn chế bổ sung cho nội dung trong <iframe>
srcURLChỉ định địa chỉ của tài liệu để nhúng vào <iframe>
srcdocHTML_codeChỉ định nội dung HTML của trang sẽ hiển thị trong <iframe>
widthpixelsChỉ định chiều rộng của <iframe>. Chiều rộng mặc định là 300 pixel

Thuộc tính Global

Thẻ <iframe> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <iframe> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Thêm và xóa viền iframe (bằng CSS):

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

Cài đặt CSS mặc định

Hầu hết mọi trình duyệt sẽ hiển thị phần tử <iframe> với các giá trị mặc định sau:

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}
Chủ Nhật, 27/11/2022 11:11
54 👨 121
0 Bình luận
Sắp xếp theo