Thẻ trong HTML (Nhúng một trang web)
Quote from giaosumaytinh.com on 04/08/2024, 12:37 chiều- Để 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>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>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>- 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>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>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>- 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
- Không thể thực thi mã lệnh JavaScript
- Không thể mở những liên kết có thuộc tính target="_blank"
- Chặn nội dung từ các phần tử: <object>, <embed>, <applet>, ....
- Chặn những thuộc tính tự động được kích hoạt: tự phát video, tự phát nhạc, ....
- 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>
- Để 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><!DOCTYPE html>
<html>
<body>
<iframe src="http://webcoban.vn/css/default.html"></iframe>
</body>
</html>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)
<!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>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>
- 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>- 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ị.
<!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>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.
<!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>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ị.
<!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>- 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
- Không thể thực thi mã lệnh JavaScript
- Không thể mở những liên kết có thuộc tính target="_blank"
- Chặn nội dung từ các phần tử: <object>, <embed>, <applet>, ....
- Chặn những thuộc tính tự động được kích hoạt: tự phát video, tự phát nhạc, ....
- 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 |
- 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>