iframe trong HTML: nhúng trang web, video và bản đồ

Cách dùng iframe

<iframe> hiển thị một trang khác bên trong trang của bạn. Đặt địa chỉ trang đó vào src, một title mô tả nó, và một kích thước:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Khung tải trang như một tài liệu riêng, có style và script riêng. Các ví dụ trên trang này dùng srcdoc thay cho src, tức là đặt HTML của khung ngay trong thuộc tính, nên chúng chạy được mà không cần tải trang web khác:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Đoạn văn bên ngoài có màu xanh và in đậm; đoạn văn bên trong khung thì không, dù trang có cùng một quy tắc p. Style không bao giờ vượt qua ranh giới của khung, theo cả hai chiều. Viền mặc định và kích thước mặc định 300×150 do trình duyệt đặt; các thuộc tính width và height ghi đè kích thước đó.

Nhúng video YouTube hoặc bản đồ

Các trang video và dịch vụ bản đồ cho bạn sẵn đoạn code iframe. Trên YouTube, bấm Chia sẻ, rồi Nhúng:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Với Google Maps, mở địa điểm, bấm Chia sẻ, rồi Nhúng bản đồ, và sao chép iframe theo cùng cách. Giữ title (trình đọc màn hình đọc nó khi đi vào khung) và thay kích thước cố định bằng CSS responsive bên dưới. Thuộc tính allow cấp cho khung các tính năng như tự động phát hay toàn màn hình, vốn bị tắt mặc định với trang được nhúng.

Kích thước, viền và iframe responsive

Các đoạn code nhúng sao chép về dùng kích thước pixel cố định, nên tràn ra ngoài trên điện thoại. width: 100% cùng aspect-ratio khiến khung lấp đầy khối chứa và giữ nguyên tỷ lệ, còn border: 0 bỏ viền inset mặc định:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Đổi max-width: 480px sang giá trị khác và khung vẫn giữ tỷ lệ 16:9 ở mọi chiều rộng. Bỏ border: 0 để thấy viền mặc định của trình duyệt. Các thuộc tính cũ frameborder, scrolling và marginheight đã lỗi thời; hãy dùng CSS.

sandbox: giới hạn những gì khung được làm

Một khung có thể chạy script, gửi form và mở popup như mọi trang khác. Thuộc tính sandbox lấy đi những quyền đó; sandbox để trống chặn gần như mọi thứ, và mỗi từ khóa trả lại một quyền. Cả hai khung bên dưới nhận cùng một đoạn HTML có một script nhỏ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

Khung thứ nhất giữ nguyên chữ giữ chỗ vì script của nó không bao giờ chạy (console của Chrome ghi thông báo "Blocked script execution" cho nó). Hãy dùng sandbox mỗi khi bạn nhúng nội dung mà bạn không hoàn toàn tin tưởng, như HTML do người dùng viết, và chỉ thêm những từ khóa nó cần:

Đừng bao giờ kết hợp allow-scripts và allow-same-origin cho nội dung từ chính origin của bạn: khi đó script trong khung có thể tự gỡ bỏ sandbox của nó.

Giao tiếp với khung: postMessage

Trang bên ngoài và khung là hai tài liệu riêng. Khi origin của chúng khác nhau, chúng không thể chạm vào DOM của nhau, nhưng có thể gửi tin nhắn. Gõ một tin nhắn và gửi nó vào khung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

Trong code thực tế, hãy truyền đúng origin của khung (như 'https://maps.example.com') thay cho '*', và kiểm tra e.origin ở phía nhận, để tin nhắn chỉ đi tới và đến từ trang web bạn mong đợi.

Hiệu năng và khi trang web từ chối

• Lazy loading. Thêm loading="lazy" cho các khung nằm xa phía dưới trang; trình duyệt chỉ tải chúng khi người đọc cuộn tới gần. Mỗi iframe là một lần tải trang đầy đủ, nên một trang có nhiều nội dung nhúng sẽ chậm nếu thiếu nó.
• "Refused to connect". Nhiều trang web (ngân hàng, phần lớn mạng xã hội, Google tìm kiếm) gửi header X-Frame-Options hoặc frame-ancestors cấm việc nhúng vào khung, và trình duyệt hiện lỗi trong khung. Trang của bạn không thể ghi đè điều này. Hãy dùng URL nhúng chính thức của trang web, hoặc một liên kết.
• Khả năng truy cập. Luôn đặt title. Đó là cách trình đọc màn hình gọi tên khung, và một trang có nhiều khung không có tiêu đề rất khó di chuyển.

Lỗi thường gặp

• Thiếu title. Trình đọc màn hình đọc khung là không có tên.
• Chiều rộng cố định từ code nhúng sao chép về. Thay bằng width: 100% và aspect-ratio.
• Nhúng một tệp video thông thường bằng iframe. Với tệp .mp4 của riêng bạn, hãy dùng phần tử video; iframe dành cho trang web.
• Tin tưởng nội dung trong khung. Thêm sandbox cho mọi thứ không phải do bạn viết.
• Nghĩ rằng CSS bên ngoài định dạng được khung. Hãy định dạng trang trong khung từ bên trong nó.