iFrame trong HTML là gì? Ví dụ sử dụng iFrame trong HTML

23 Tháng Ba, 2022 253 lượt xem

iFrame trong HTML là gì? Và được áp dụng như thế nào để đem lại sự hiệu quả trong quá trình code. Trong bài viết này, Việt Nét sẽ giới thiệu và đưa ra các ví dụ cụ thể giúp bạn dễ hiểu hơn về các thuộc tính và cách sử dùn iFrame trong HTML

Giới thiệu về thẻ iFrame trong HTML

Thẻ iFrame trong HTML là những inline frames được sử dụng để chèn một HTML Document bên trong một HTML Document khác. IFrame được sử dụng rộng rãi trong quá trình thiết kế website để chèn nội dung trực tiếp vào trang web từ các nguồn khác như nội dung quảng cáo, các control panel điều khiển,…

iframe trong html la gi — iFrame trong HTML là gì?

Hầu hết các nhà thiết kế web sử dụng iFrame để thể hiện các ứng dụng tương tác trên trang các trang web. Điều này có thể thực hiện được bằng cách sử dụng JavaScript hoặc bằng cách sử dụng thuộc tính “target” trong HTML.

>> Xem thêm: HTML là gì? Cấu trúc HTML như thế nào?

Mục đích chính của iFrame là dùng để hiển thị một website bên trong một website khác thông qua việc sử dụng thẻ có tên gọi . Nó hoạt động như một block hình chữ nhật được chèn trong website của bạn và browser sẽ hiển thị nội dung của website khác trong đó, bao gồm cả phần thanh trượt (scrollbar) để người dùng có thể tương tác với website được chèn vào.</p> <h2 id="cu-phap-de-su-dung-iframe-trong-html" class="ftwp-heading ftwp-heading">Cú pháp để sử dụng iFrame trong HTML</h2> <p>Để <strong>sử dụng iFrame trong HTML</strong>, có thể sử dụng như sau:</p> <pre class="wp-block-code language-bash"><code><iframe src="https://24hviet.net/iframe-trong-html/URL">

iframe: Tag dùng để khai báo sử dụng iframe trong HTML.
src: Thuộc tính khai báo URL của page sẽ được chèn vào iframe.

Ví dụ:

Cũng có thể chèn thêm các thuộc tính như chiều cao (height), chiều rộng (width) cho iframe (theo đơn vị pixel) bằng cú pháp:

Với cú pháp trên, iframe sẽ được chèn vào nhưng được quy định rõ chiều cao và chiều rộng của frame.

Ví dụ:

Ngoài ra chúng ta cũng thể khai báo chiều cao và chiều rộng của iframe bằng cách khai báo các giá trị của CSS bằng cú pháp:

Mọi thứ hoạt động tương tự như cách bạn chèn iframe thông thường, chỉ thay đổi ở cách chúng ta khai báo giá trị cho iframe.

Ví dụ:

Bằng cách sử dụng CSS, chúng ta có thể sử dụng iframe một cách linh hoạt hơn như thay đổi kích thước của border, khai báo màu sắc cho border,…

iframe cũng có thể sử dụng như Target cho một link bằng cách sử dụng cú pháp:

Với cú pháp trên, src là một URL như bình thường; ở đây, thuộc tính target của link sẽ tham chiếu đến thuộc tính name trong iframe của chúng ta.

Ví dụ:

Các thuộc tính của iFrame

Có rất nhiều thuộc tính (tags) hữu ích khi sử dụng thẻ iframe trong HTML:

src: Thuộc tính này dùng để chèn một file vào iFrame. Nếu là một URL, được chỉ định webpage sẽ được load bên trong iFrame.
name: Thuộc tính name thường được dùng để định danh một iFrame. Sẽ rất hữu ích nếu bạn muốn tạo một link để mở một website khác.
allowfullscreen: Thuộc tính này cho phép hiển thị frame ở định dạng full-width. Bạn cần set giá trị của thuộc này thành true để nó có tác dụng.
frameborder: Thuộc tính này cho phép bạn khai báo có hiện hoặc không hiện border của frame. Khi set giá trị là 1, border sẽ được thể hiện, nếu set giá trị là 0, border của frame sẽ không được thể hiện.
marginwidth: Cho phép bạn khai báo khoảng cách của hai bên trái & phải của frame.
marginheight: Thuộc tính này cho phép bạn khai báo khoảng cách phía trên & phía dưới của frame.
scrolling: thuộc tính này dùng để kiểm soát việc thanh cuộn (scrollbar) có hiển thị hay không hiển thị vào iFrame. Các giá trị bao gồm là Yes hoặc No hoặc Auto.
height: Được sử dụng để xác định chiều cao cho frame (Được xác định bằng % hoặc tính bằng pixel).
width: Được sử dụng để xác định chiều rộng cho frame (Được xác định bằng % hoặc tính bằng pixel).
Longdesc: Với sự trợ giúp của thuộc tính này, bạn có thể liên kết một trang khác với mô tả dài về nội dung trong frame của bạn.

Tóm tắt một số thuộc tính cơ bản của thẻ qua bảng dưới đây:</p> <figure class="wp-block-table"> <table class="has-fixed-layout"> <thead> <tr> <th class="has-text-align-center" data-align="center">Thuộc tính</th> <th>Chú thích</th> </tr> </thead> <tbody> <tr> <td class="has-text-align-center" data-align="center"><strong>src</strong></td> <td>Xác định đường dẫn mà bạn muốn nhúng vào trang web </td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>name</strong></td> <td>Xác định tên định danh một iFrame</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>allowfullscreen</strong></td> <td>Xác định frame ở định dạng full-width</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>frameborder</strong></td> <td>Khai báo border có hoặc không</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>marginwidth</strong></td> <td>Khai báo khoảng cách bên trái và phải</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>marginheight</strong></td> <td>Khai báo khoảng cách trên và dưới</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>scrolling</strong></td> <td>Xác định có hiển thị thanh scroll hay không?</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>height</strong></td> <td>Xác định chiều cao của phần tử</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>width</strong></td> <td>Xác định chiều rộng của phần tử</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>longdesc</strong></td> <td>Liên kết trang khác với mô tả dài về nội dung</td> </tr> <tr> <td class="has-text-align-center" data-align="center"><strong>sanbox</strong></td> <td>Hạn chế một số tính năng của trang web được nhúng bởi <iframe></td> </tr> </tbody> </table><figcaption>Bảng tóm tắt các thuộc tính thường được sử dụng trong thẻ <iframe></figcaption></figure> <h2 id="vi-du-ve-the-iframe-trong-html" class="ftwp-heading ftwp-heading"><strong>Ví dụ về thẻ <iframe> trong HTML</strong></h2> <p>Dưới đây là một số ví dụ về sử dụng iframe trong HTML, các ví dụ sẽ được giải thích chi tiết bên dưới:</p> <h3 id="thuoc-tinh-width-va-height" class="ftwp-heading ftwp-heading"><strong>Thuộc tính width và height</strong></h3> <p>Hãy xem xét một ví dụ mà chúng ta sẽ trình bày cách tạo iframe với chiều cao và chiều rộng cụ thể.</p> <pre class="wp-block-code language-bash"><code><!DOCTYPE html> <html> <body data-rsssl=1> <h2 id="ftoc-heading-6" class="ftwp-heading">24hviet.net Iframes Demo</h2> Here we are showing example of Iframe which containing specifc Height and width in pixels format <iframe loading="lazy" src="https://24hviet.net/iframe-trong-html/C:UsersSonaliDesktopHTML_block_elements.html" height="300" width="300"> Kết quả:

Thuộc tính width và height thông qua CSS

Hãy xem xét một ví dụ khác mà Việt Nét sẽ trình bày cách tạo iFrame với chiều cao và chiều rộng cụ thể. Nhưng trong ví dụ này, chúng ta đang chỉ định chiều cao và chiều rộng thông qua CSS. Ở đây chúng ta có thể thấy scrollbar đang được điều chỉnh theo kích thước nội dung.

Việt Nét Iframes Demo

Here we are showing example of Iframe which containing specifc Height and width in pixels format

Kết quả:

Demo ví dụ về thuộc tính width & height thông qua CSS

Thuộc tính border

Ở đây chúng ta đang xem xét một ví dụ mà chúng ta sẽ thêm border vào iFrame bằng cách thêm một số thuộc tính CSS bổ sung để hiển thị sự thay đổi về kích thước, màu sắc của border,… Vì vậy, chúng ta có thể thêm nhiều style cho iFrame của chúng ta.

Code:

Việt Nét ifFrames Demo

Here we are showing example of Iframe which containing border with some additional CSS proprties

Kết quả:

demo vi du ve thuoc tinh border của iframe trong html — Demo ví dụ về thuộc tính border của iframe trong HTML

Thuộc tính target

Hãy xem xét một ví dụ khác mà chúng ta sẽ trình bày cách thuộc tính target để mở một liên kết của một trang web bằng cách sử dụng iFrame.

Việt Nét Demo - Target for a Link

Iframe - Target for a Link

Việt Nét Hosting

When the target attribute of a link matches the name of an iframe, the link will open in the iframe.

Kết quả:

thuoc tinh target cua iframe trong html — Thuộc tính target của iframe trong HTML

Target output:

Ví dụ như hình trên, khi chúng ta nhấp vào liên kết sẽ mở trang web tiếp theo được hiển thị bên dưới

Thuộc tính sanbox

Thuộc tính sanbox thường dùng để hạn chế một số tính năng của trang web khi nhúng vào. Một số tính năng bị hạn chế như:

Không nhấn được submit form.
Không thực thi mã lệnh JavaScript.
Không thêm được thuộc tính target=”_blank”.
Vô hiệu quá API.
Chặn các thuộc tính: Tự replay, auto play video,…

Tuy nhiên, chúng ta có thể thêm các giá trị thuộc tính sanbox đẻ kích hoạt lại những tính năng bạn không mượn chặn.

Giá trị thuộc tính	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ở thêm những liên kết có thuộc tính target=”_blank”
allow-pointer-lock	Kích hoạt các API

Tổng kết về việc sử dụng thẻ iFrame trong HTML

Thông tin trên giúp ta có thể kết luận rằng iFrame là một frame nội tuyến bao gồm một tài liệu HTML khác vào chính nó. IFrame được coi là phần tử HTML mạnh mẽ nhất cho mục đích thiết kế web. Với sự trợ giúp của iFrame, bạn cũng có thể thêm một số nội dung từ một nguồn khác. Có thể sử dụng các loại thuộc tính HTML khác nhau như thuộc tính “Global Attributes”, Thuộc tính sự kiện “Event Attributes”, một số trang liên quan,…

Lời kết

Qua bài viết iFrame trong HTML trên của Việt Nét, giúp bạn hiểu rõ và cách sử dụng iFrame hiệu quả hơn. Nếu có bất kỳ thắc mắc nào bạn có thể để lại bình luận phía dưới đây.

Hãy đánh giá bài viết post

Ngoài ra, khi sử dụng dịch vụ VPS và Hosting, quý khách sẽ được tặng bộ Theme & Plugin WordPress bản quyền trị giá đến 800$/năm. Đăng ký dùng thử ngay và Việt Nét sẽ hoàn tiền 100% nếu quý khách không hài lòng với chất lượng sản phẩm, dịch vụ! Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với Việt Nét thông qua các kênh sau:

Thiết kế website