Nội dung nhúng

7.1 Phần tử <iframe>

Phần tử <iframe> trong HTML được dùng để nhúng một tài liệu HTML khác vào tài liệu hiện tại. Điều này cho phép hiển thị nội dung của các trang web khác bên trong tài liệu chính, tạo khả năng tích hợp nhiều nguồn tài nguyên khác nhau như video, bản đồ, tài liệu và các trang web khác.

Phần tử <iframe> tạo một khung nhúng, có thể hiển thị một tài liệu HTML khác. Tài liệu này có thể được tải từ bất kỳ URL nào và hoạt động độc lập với tài liệu chính.

Cú pháp:

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

Ví dụ sử dụng:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Ví dụ iframe"></iframe>
    
  

Thuộc tính

• src: URL của tài liệu, sẽ được tải vào <iframe>
• width: độ rộng của khung (có thể được chỉ định bằng pixel hoặc phần trăm)
• height: chiều cao của khung (có thể được chỉ định bằng pixel hoặc phần trăm)
• title: mô tả ngắn gọn về nội dung của khung (quan trọng cho khả năng truy cập)
• name: tên của khung, có thể được sử dụng để nhắm mục tiêu liên kết và biểu mẫu
• sandbox: thiết lập hạn chế cho nội dung của khung, tăng cường bảo mật
• allow: xác định các chức năng nào có thể được sử dụng trong <iframe> (ví dụ allowfullscreen cho chế độ toàn màn hình)

7.2 Thuộc tính allowfullscreen

Thuộc tính allowfullscreen cho phép chế độ toàn màn hình cho nội dung được tải trong <iframe>. Không có thuộc tính này, nội dung sẽ không thể chuyển sang chế độ toàn màn hình.

Cú pháp:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Ví dụ sử dụng:

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

Chế độ toàn màn hình cho phép người dùng xem video hoặc tài nguyên khác ở chế độ toàn màn hình, cải thiện trải nghiệm người dùng.

7.3 Thuộc tính allow

Thuộc tính allow xác định các tính năng nào có thể được sử dụng trong <iframe>, chẳng hạn như truy cập vào vị trí địa lý, máy ảnh, micrô và chế độ toàn màn hình.

Cú pháp:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Ví dụ sử dụng:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Lợi ích:

• Kiểm soát chức năng: cho phép chỉ định các chức năng và API nào có thể được sử dụng bởi nội dung nhúng
• Quản lý quyền: cung cấp sự linh hoạt trong quản lý quyền truy cập vào các chức năng khác nhau, chẳng hạn như vị trí địa lý và máy ảnh

7.4 Thuộc tính sandbox

Thuộc tính sandbox được sử dụng để áp dụng các hạn chế cho nội dung được tải trong <iframe>. Nó ngăn chặn việc thực thi một số hành động nhất định, như chạy script hoặc mở các cửa sổ pop-up, từ đó tăng cường bảo mật.

Cú pháp:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Giá trị của thuộc tính sandbox:

• allow-forms: cho phép gửi biểu mẫu
• allow-modals: cho phép sử dụng các cửa sổ modals
• allow-orientation-lock: cho phép khóa định hướng màn hình
• allow-pointer-lock: cho phép khóa con trỏ
• allow-popups: cho phép mở các cửa sổ pop-up
• allow-popups-to-escape-sandbox: cho phép các pop-up thoát khỏi môi trường sandbox
• allow-presentation: cho phép truy cập vào API trình bày
• allow-same-origin: cho phép thực thi các script từ cùng nguồn gốc
• allow-scripts: cho phép thực thi script
• allow-storage-access-by-user-activation: cho phép truy cập lưu trữ khi có kích hoạt của người dùng
• allow-top-navigation: cho phép điều hướng cấp trên
• allow-top-navigation-by-user-activation: cho phép điều hướng cấp trên khi có kích hoạt của người dùng

Ví dụ sử dụng:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Lợi ích:

• Bảo mật: ngăn chặn việc thực thi các script tiềm ẩn rủi ro và hạn chế chức năng của nội dung nhúng
• Kiểm soát truy cập: cho phép các nhà phát triển chỉ định chính xác các chức năng nào được phép cho nội dung nhúng

7.5 Thuộc tính loading

Thuộc tính loading điều khiển cách <iframe> được tải, cho phép trì hoãn tải cho đến khi phần tử trở nên hiển thị trên màn hình (tải lười biếng).

Giá trị của thuộc tính loading:

• lazy: trì hoãn tải <iframe> cho đến khi phần tử hiển thị
• eager: tải <iframe> ngay lập tức, bất kể tầm nhìn của nó

Cú pháp:

    
      loading="status"
    
  

Ví dụ sử dụng:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Lợi ích:

• Tối ưu hóa hiệu suất: tải lười biếng giảm số lượng dữ liệu tải và tăng tốc độ tải trang
• Giảm sử dụng tài nguyên: chỉ tải những phần tử người dùng thực sự thấy và sử dụng