Với lập trình website hiện nay, iframe là một công cụ không thể thiếu cho các nhà phát triển. Nó cho phép chúng ta nhúng một trang web hoặc một phần của trang web vào trong một trang khác mà không cần phải tải lại toàn bộ trang. Điều này rất hữu ích cho việc nhúng các video, bản đồ, hoặc thậm chí là các tài liệu từ bên thứ ba.

1. Iframe trong HTML là gì?

Iframe, viết tắt của Inline Frame, là một thẻ HTML dùng để nhúng một trang web, video, hình ảnh, hoặc tài liệu vào trong một trang web khác. Với Iframe ta có thể tạo ra một khung nội tuyến cho phép người dùng xem và tương tác với nội dung từ một nguồn khác mà không cần rời khỏi trang hiện tại.

Ví dụ về cách sử dụng Iframe để nhúng một video từ YouTube vào trang web:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Tuy nhiên, cần đặc biệt lưu ý rằng không phải tất cả các trang web đều cho phép nhúng nội dung của họ qua Iframe do các vấn đề bảo mật và quyền riêng tư. Ngoài ra, việc sử dụng quá nhiều Iframe có thể ảnh hưởng đến tốc độ tải trang web.

2. Cách sử dụng Iframe trong HTML

Để sử dụng iframe, chúng ta sử dụng thẻ <iframe> của mã HTML. Dưới đây là cú pháp cơ bản của một thẻ <iframe>:

<iframe src="url" width="100px" height="100px"></iframe>
  • src: Đường dẫn đến trang web mà bạn muốn nhúng.
  • width và height: Kích thước của khung nhúng, thường được định nghĩa bằng pixel hoặc phần trăm.

>>>>> Xem thêm các bài tương tự tại đây:

 

3. Ví dụ cơ bản Iframe trong HTML

Ví dụ để có thể nhúng một trang web từ YouTube vào trang web của mình, chúng ta có thể làm như sau:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Hoặc, ta có thể sử dụng thêm thuộc tính name là tên định danh cho iframe, giúp liên kết có thể chỉ định iframe này làm đích đến với cú pháp <iframe src="url" name="name_iframe"></iframe>

<iframe src="stringee.com" name="Stringee"></iframe>

Ở ví dụ này, khi một liên kết có thuộc tính target trùng với giá trị name của iframe, nội dung từ URL sẽ được tải trực tiếp vào khu vực hiển thị của iframe.

4. Một số thuộc tính cơ bản của Iframe trong HTML

Dưới đây là bản tóm tắt về các thuộc tính của thẻ Iframe trong HTML:

  • src: Dùng để chèn một file hoặc webpage vào iframe.
  • name: Định danh cho iframe, hữu ích khi tạo link mở website khác.
  • allowfullscreen: Cho phép hiển thị frame ở định dạng full-width khi set giá trị là true.
  • frameborder: Khai báo hiển thị hoặc ẩn border của frame.
  • marginwidth và marginheight: Đặt khoảng cách hai bên và phía trên dưới của frame.
  • scrolling: Kiểm soát việc hiển thị thanh cuộn trong iframe.
  • height và width: Xác định chiều cao và chiều rộng cho frame.
  • longdesc: Liên kết trang mô tả chi tiết nội dung trong frame.

Với việc sử dụng các thuộc tính này một cách hợp lý sẽ giúp điều chỉnh và tùy biến IFrame để phù hợp với nhu cầu thiết kế web.

Tổng kết

Iframe, một thành phần không thể thiếu trong HTML, mở ra khả năng tích hợp linh hoạt các nội dung từ nguồn khác nhau vào trang web của chúng ta. Tuy nhiên, khi sử dụng iframe, cần lưu ý đến các vấn đề về bảo mật và hiệu suất trang web. Hãy sử dụng iframe một cách thông minh và có chọn lọc để đảm bảo trang web của bạn vừa an toàn vừa nhanh chóng, mang lại giá trị tốt nhất cho người dùng.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: Banner bottom