×

Cách sử dụng thẻ <iframe> để nhúng trang web khác trong HTML

Avatar of admin
admin 1 Views

Trong thiết kế và phát triển web, việc nhúng một trang web hoặc tài liệu từ một nguồn khác vào trang web của bạn có thể được thực hiện dễ dàng bằng cách sử dụng thẻ <iframe>. Đây là một công cụ mạnh mẽ mà các nhà phát triển web thường sử dụng để tích hợp nội dung từ một trang web khác mà không cần phải sao chép và dán mã nguồn.

Khái niệm cơ bản

Thẻ <iframe> (Inline Frame) là một thẻ HTML dùng để nhúng một tài liệu HTML khác vào trong trang web của bạn. Nó hoạt động như một cửa sổ "nhỏ" bên trong trang web, hiển thị nội dung của trang web khác.

Cú pháp cơ bản của thẻ <iframe>:

<iframe src="URL"></iframe>

Trong đó, thuộc tính src là URL của trang web mà bạn muốn nhúng.

Các thuộc tính quan trọng của thẻ <iframe>

  1. width và height: Đây là hai thuộc tính dùng để thiết lập chiều rộng và chiều cao của iframe.

    <iframe src="URL" width="600" height="400"></iframe>

  2. frameborder: Thuộc tính này quyết định xem có hiển thị viền xung quanh iframe hay không. Giá trị 0 sẽ bỏ viền, còn 1 sẽ hiển thị viền.

    <iframe src="URL" frameborder="0"></iframe>

  3. scrolling: Điều khiển việc hiển thị thanh cuộn. Thuộc tính này có thể nhận các giá trị "yes", "no", hoặc "auto".

    <iframe src="URL" scrolling="no"></iframe>

  4. allowfullscreen: Cho phép nhúng nội dung hiển thị ở chế độ toàn màn hình. Không cần giá trị nào cho thuộc tính này.

    <iframe src="URL" allowfullscreen></iframe>

Nhúng trang web từ các nguồn khác nhau

Một trong những điểm mạnh của thẻ <iframe> là khả năng nhúng nội dung từ các dịch vụ khác nhau, như Google Maps, YouTube, hoặc các trang mạng xã hội.

Ví dụ nhúng video từ YouTube:

<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>

Nhúng Google Maps:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.794290635508!2d-122.41941508522863!3d37.7749291797594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808bb39dc4cf%3A0xfb71d3d83876141e!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1234567890" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Lưu ý về bảo mật

Khi sử dụng <iframe>, có một số vấn đề về bảo mật cần lưu ý:

  1. Nguồn gốc chéo (CORS): Một số trang web không cho phép nội dung của mình được nhúng qua iframe do chính sách bảo mật của họ.

  2. X-Frame-Options: Một số trang web sử dụng header X-Frame-Options với các giá trị như SAMEORIGIN hoặc DENY để ngăn không cho trang của họ được nhúng trong iframe.

  3. sandbox: Thuộc tính sandbox có thể được sử dụng để thêm các hạn chế bảo mật khi nhúng nội dung bên thứ ba.

    <iframe src="URL" sandbox="allow-scripts allow-same-origin"></iframe>

Kết luận

Thẻ <iframe> là một công cụ hữu ích và mạnh mẽ trong HTML, giúp bạn nhúng nội dung từ các nguồn khác một cách dễ dàng và linh hoạt. Với nhiều thuộc tính và tùy chọn, bạn có thể tùy chỉnh iframe để phù hợp với nhu cầu của mình. Tuy nhiên, việc sử dụng cũng cần cân nhắc vấn đề bảo mật để bảo vệ trang web của bạn khỏi các lỗ hổng tiềm ẩn.

Comments

Bài viết liên quan