Chèn một khung (iframe) vào trang web là một cách hiệu quả để hiển thị nội dung từ một trang web khác mà không cần rời khỏi trang hiện tại. Thẻ <iframe> trong HTML cho phép nhúng video, bản đồ, tài liệu hoặc bất kỳ trang web nào vào bên trong website của bạn. Ngoài ra, bạn có thể tùy chỉnh kích thước, viền, cuộn trang và nhiều thuộc tính khác để phù hợp với giao diện của trang web. Trong bài viết này, Y2Graphic sẽ chia sẻ cách sử dụng iframe để nhúng nội dung một cách chuyên nghiệp và tối ưu.
Khung là gì?
Khung là một phần tử được tạo nên bởi thẻ <iframe>, nó có chức năng gần giống với một cái Tab trên trình duyệt, đó chính là dùng để mở & thao tác với trang web.
Ví dụ: Phần tử bên dưới chính là một cái khung.
Cách chèn một cái khung vào bên trong trang web
– Để chèn một cái khung vào bên trong trang web thì chúng ta sử dụng thẻ <iframe> với cú pháp như sau:
<iframe src="URL"></iframe>– Trong đó, URL là đường dẫn đến trang web mà chúng ta muốn nó được hiển thị bên trong cái khung.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="../css/default.html"></iframe>
</body>
</html>– Dưới đây là một số thuộc tính thường được sử dụng bên trong thẻ <iframe>
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)
| frameborder | – Tùy chỉnh việc hiển thị hay không hiển thị cái đường viền bao xung quanh khung. |
| width | – Thiết lập chiều rộng của cái khung. |
| height | – Thiết lập chiều cao của cái khung. |
| srcdoc | – Thiết lập nội dung sẽ được hiển thị bên trong cái khung. |
| scrolling | – Tùy chỉnh việc hiển thị hay không hiển thị các thanh scroll của cái khung. |
3) Sử dụng cái khung để làm nơi mở tài liệu
– Dưới đây là ví dụ về cách sử dụng một cái khung (iframe) để làm nơi mở tài liệu khi ta nhấp vào liên kết.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<p><a target="hello" href="../html/default.html">HTML</a></p>
<p><a target="hello" href="../image/sumo.jpg">MÈO CƯNG</a></p>
<p><a target="hello" href="../file/bunny.mp4">PHIM</a></p>
<iframe src=".." name="hello" width="900" height="500"></iframe>
</body>
</html>– Thuộc tính frameborder dùng để tùy chỉnh việc hiển thị hay không hiển thị cái đường viền bao xung quanh khung.
– Cú pháp:
frameborder="value"– Trong đó, value có thể được xác định dựa theo một trong hai loại giá trị:
| 1 | – Cái đường viền bao xung quanh khung sẽ được hiển thị (mặc định) |
| 0 | – Cái đường viền bao xung quanh khung sẽ không được hiển thị. |
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="demo?file=3653" frameborder="1"></iframe>
<br><br>
<iframe src="demo?file=3653" frameborder="0"></iframe>
</body>
</html>Thuộc tính width dùng để thiết lập chiều rộng của khung trang web.
Để sử dụng thuộc tính width thì chúng ta thêm nó vào bên trong thẻ <iframe> với cú pháp như sau:
width="value"– Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:
| px | – Chiều rộng của khung sẽ được xác định dựa theo một giá trị pixel cụ thể.
– Ví dụ, nếu tôi viết width=”400″ thì điều đó có nghĩa là cái khung sẽ hiển thị với kích thước chiều rộng là 400 pixel (Xem ví dụ) |
| % | – Chiều rộng của khung sẽ được xác định dựa theo tỷ lệ phần trăm “chiều rộng phần nội dung” của phần tử cha của nó.
– Ví dụ, nếu phần tử cha của cái khung có chiều rộng 500 pixel, tôi viết width=”60%” thì điều đó có nghĩa là cái khung sẽ được hiển thị với kích thước chiều rộng là 300 pixel (Xem ví dụ) |
– Thuộc tính height dùng để thiết lập chiều cao của khung trang web.
– Để sử dụng thuộc tính height thì chúng ta thêm nó vào bên trong thẻ <iframe> với cú pháp như sau:
height="value"– Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:
| px | – Chiều cao của khung sẽ được xác định dựa theo một giá trị pixel cụ thể.
– Ví dụ, nếu tôi viết height=”400″ thì điều đó có nghĩa là cái khung sẽ hiển thị với kích thước chiều cao là 400 pixel (Xem ví dụ) |
| % | – Chiều cao của khung sẽ được xác định dựa theo tỷ lệ phần trăm “chiều cao phần nội dung” của phần tử cha của nó.
– Ví dụ, nếu phần tử cha của cái khung có chiều cao 400 pixel, tôi viết height=”60%” thì điều đó có nghĩa là cái khung sẽ được hiển thị với kích thước chiều cao là 240 pixel (Xem ví dụ) |
– Thuộc tính srcdoc dùng để thiết lập nội dung sẽ được hiển thị bên trong cái khung.
| – Khi sử dụng thuộc tính srcdoc thì chúng ta không thể sử dụng thuộc tính src. |
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<iframe srcdoc="<p>Lập Trình Web</p><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><img src='../image/sword.png'>"></iframe>
</body>
</html>– Lưu ý: Hiện này vẫn có một số trình duyệt không hỗ trợ thuộc tính srcdoc, cho nên chúng ta chỉ tìm hiểu để cho biết thôi, chứ không nên sử dụng nó nhé các bạn :))
– Thuộc tính scrolling dùng để tùy chỉnh việc hiển thị hay không hiển thị các thanh scroll của cái khung.
– Cú pháp:
scrolling="value"– Trong đó, value có thể được xác định dựa theo một trong hai loại giá trị:
| auto | – Các thanh scroll của cái khung sẽ được hiển thị (mặc định) |
| no | – Các thanh scroll của cái khung sẽ không được hiển thị. |
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="demo?file=3653" scrolling="auto"></iframe>
<br><br>
<iframe src="demo?file=3653" scrolling="no"></iframe>
</body>
</html>
