Thẻ iframe

Thẻ iframe cho phép nhúng nội dung của một trang web vào trang web khác. Nó được sử dụng để hiển thị nội dung, chẳng hạn như video, hình ảnh hoặc bài viết, mà không cần phải mở cửa sổ hoặc tab mới.

Nội dung của trang web được nhúng sẽ có thiết kế của chính trang web đó. Trong khi đó, các CSS style của trang web chúng ta, cũng như mã JavaScript của chúng ta sẽ không ảnh hưởng đến nội dung bên trong thẻ iframe.

Có thể áp dụng JavaScript của chúng ta vào nội dung của iframe, nhưng để làm điều đó cần phải sử dụng các phương pháp đặc biệt.

Thẻ iframe được sử dụng rộng rãi trên các trang web để nhúng video từ YouTube và các nền tảng khác, cũng như để hiển thị bài viết và hình ảnh từ các nguồn khác.

Các thuộc tính

Thuộc tính	Mô tả
`src`	Chỉ định địa chỉ của trang sẽ được nhúng.
`srcdoc`	Cho phép xác định nội dung của iframe trực tiếp trong thuộc tính.
`frameborder`	Đặt khung viền xung quanh iframe. Giá trị `yes` đặt khung (mặc định), còn giá trị `no` bỏ khung viền.
`scrolling`	Đặt thanh cuộn bên trong iframe. Giá trị `auto` - cuộn khi cần thiết (mặc định), giá trị `yes` - luôn có thanh cuộn, giá trị `no` - không có thanh cuộn.

Ví dụ

Hãy chèn một iframe với một trang web khác (ví dụ lấy code.mu) vào trang web của chúng ta:

<iframe src="https://code.mu/" width="600" height="400"></iframe>

Ví dụ

Chèn một video từ YouTube vào trang web của chúng ta:

<iframe
	src="https://www.youtube.com/embed/KzQrHpB1H8U"
	allowfullscreen
	width="400"
	height="400">
</iframe>

Ví dụ

Viết nội dung trực tiếp trong iframe:

<iframe
	srcdoc="<h1>Tiêu đề</h1><p>Văn bản</p>"
	width="300"
	height="200">
</iframe>