Thẻ <iframe> trong HTML

1) Thẻ <iframe> trong HTML

- Thẻ <iframe> thường được dùng để nhúng một trang web nào đó vào trang web hiện tại

- Ví dụ: Phía dưới là trang chủ của trang "webcoban.vn" được tôi nhúng vào trang này.

- Để dùng thẻ <iframe>, chúng ta sử dụng cú pháp như sau:

<iframe src="url của trang web mà bạn muốn nhúng vào trang hiện tại"></iframe>

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <iframe src="http://webcoban.vn/css/default.html"></iframe>
</body>
</html>

Xem ví dụ

2) Các thuộc tính của thẻ <iframe>

- Thẻ <iframe> có bảy thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về bảy thuộc tính đó:

src	Xác định đường dẫn đến trang web mà bạn muốn nhúng vào trang hiện tại
width	Xác định chiều rộng của phần tử <iframe>
height	Xác định chiều cao của phần tử <iframe>
scrolling	Xác định việc có hiển thị các thanh scroll hay không
srcdoc	Xác định một nội dung HTML sẽ được hiển thị bên trong phần tử <iframe>
frameborder	Xác định việc có hiển thị đường viền của phần tử <iframe> hay không
sandbox	Hạn chế một số tính năng của trang web được nhúng bởi phần tử <iframe>

2.1) Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến trang web mà bạn muốn nhúng vào trang hiện tại.

(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Địa chỉ của trang web mà tôi nhúng vào trang hiện tại của phần tử iframe bên dưới được xác định bởi đường dẫn TUYỆT đối.</p>
    <iframe src="http://webcoban.vn/css/default.html"></iframe>
    <p>- Địa chỉ của trang web mà tôi nhúng vào trang hiện tại của phần tử iframe bên dưới được xác định bởi đường dẫn TƯƠNG đối.</p>
    <iframe src="../css/default.html"></iframe>
</body>
</html>

Xem ví dụ

2.2) Thuộc tính width & height

- Thuộc tính width & height dùng để thiết lập chiều rộng & chiều cao của phần tử <iframe>

Ví dụ:

- Phần tử <iframe> bên dưới sẽ có chiều rộng bằng 100% chiều rộng phần nội dung của phần tử chứa nó và có chiều cao là 350px

<iframe src="http://webcoban.vn" width="100%" height="350px"></iframe>

Xem ví dụ

- Lưu ý: Ngoài việc sử dụng thuộc tính width & height của phần tử <iframe> thì chúng ta cũng có thể sử dụng thuộc tính width & height trong CSS để thay thế.

2.3) Thuộc tính scrolling

- Nếu trang web được nhúng vào có kích thước lớn hơn phần tử <iframe>, thì khi đó mặc định phần tử <iframe> sẽ hiển thị các thanh scroll (ngang hoặc dọc) giúp ta kéo lên xuống hoặc sang trái phải để có thể xem hết nội dung của trang web được nhúng vào.

- Ví dụ: Phần tử <iframe> bên dưới tự động có thêm các thanh scroll.

- Từ đây, thuộc tính scrolling giúp chúng ta xác định việc có nên hiển thị các thanh scroll hay không.

- Thuộc tính scrolling có thể có một trong ba giá trị: auto, yes, no

Giá trị auto (đây là giá trị mặc định): thanh scroll sẽ tự động hiển thị khi nào kích thước của trang web được nhúng vào lớn hơn kích thước của phần tử <iframe>
Giá trị yes: thanh scroll sẽ luôn luôn hiển thị mặc cho có cần thiết hay không.
Giá trị no: thanh scroll sẽ không bao giờ được hiển thị.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Phần tử iframe bên dưới luôn hiển thị các thanh scroll</p>
    <iframe src="http://webcoban.vn" scrolling="yes"></iframe>
    <p>- Phần tử iframe bên dưới không bao giờ hiển thị các thanh scroll</p>
    <iframe src="http://webcoban.vn" scrolling="no"></iframe>
</body>
</html>

Xem ví dụ

2.4) Thuộc tính srcdoc

- Thuộc tính srcdoc dùng để xác định một nội dung HTML sẽ được hiển thị bên trong phần tử <iframe>

- Lưu ý:

Nếu trình duyệt có hỗ trợ thuộc tính srcdoc thì nó sẽ ghi đè lên thuộc tính src.
Nếu trình duyệt không hỗ trợ thuộc tính srcdoc thì thuộc tính src sẽ ghi đè lên thuộc tính srcdoc.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <iframe src="http://webcoban.vn" srcdoc="<div style='border:1px solid black;border-radius:10px;padding:20px;margin:20px;'>Hello</div>"></iframe>
</body>
</html>

Xem ví dụ

2.5) Thuộc tính frameborder

- Thuộc tính frameborder xác định việc có hiển thị đường viền của phần tử <iframe> hay không.

- Thuộc tính frameborder có thể có một trong hai giá trị là: 1 hoặc 0

Giá trị 1 (đây là giá trị mặc định): Đường viền của phần tử <iframe> sẽ được hiển thị.
Giá trị 0: Đường viền của phần tử <iframe> sẽ không được hiển thị.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Phần tử iframe bên dưới có đường viền</p>
    <iframe src="http://webcoban.vn" frameborder="1"></iframe>
    <p>- Phần tử iframe bên dưới không có đường viền</p>
    <iframe src="http://webcoban.vn" frameborder="0"></iframe>
</body>
</html>

Xem ví dụ

- Lưu ý: Ngoài việc sử dụng thuộc tính frameborder của phần tử <iframe> thì chúng ta cũng có thể sử dụng thuộc tính border trong CSS để thay thế.

2.6) Thuộc tính sandbox

- Thuộc tính sandbox dùng để hạn chế một số tính năng của trang web được nhúng vào.

- Mặc định, dưới đây là những tính năng bị hạn chế của trang web được nhúng vào:

Không thể submit form (Xem ví dụ)
Không thể thực thi mã lệnh JavaScript (Xem ví dụ)
Không thể mở những liên kết có thuộc tính target="_blank" (Xem ví dụ)
Chặn nội dung từ các phần tử: <object>, <embed>, <applet>, .... (Xem ví dụ)
Chặn những thuộc tính tự động được kích hoạt: tự phát video, tự phát nhạc, .... (Xem ví dụ)
Vô hiệu hóa các API

- Mặc định là những tính năng trên sẽ bị ngăn chặn. Tuy nhiên, chúng ta có thể thêm giá trị cho thuộc tính sandbox để kích hoạt lại những tính năng mà bạn không muốn bị chặn.

Giá trị	Mô tả
allow-forms	Cho phép submit form
allow-scripts	Cho phép thực thi mã lệnh JavaScript
allow-popups	Cho phép mở những liên kết có thuộc tính target="_blank"
allow-pointer-lock	Kích hoạt các API

Ví dụ:

- Kích hoạt lại tính năng cho phép submit form

<!DOCTYPE html>
<html>
<body>
    <iframe src="demo?file=2131" sandbox="allow-forms"></iframe>
</body>
</html>

Xem ví dụ