<iframe>: The Inline Frame element

Try it

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

Mỗi ngữ cảnh duyệt web nhúng có document riêng và cho phép điều hướng URL. Các điều hướng của mỗi ngữ cảnh duyệt web nhúng được tuyến tính hóa vào lịch sử phiên của ngữ cảnh duyệt web trên cùng. Ngữ cảnh duyệt web nhúng các ngữ cảnh khác được gọi là ngữ cảnh duyệt web cha. Ngữ cảnh duyệt web trên cùng — không có cha — thường là cửa sổ trình duyệt, được đại diện bởi đối tượng Window.

Thuộc tính

Phần tử này bao gồm thuộc tính toàn cục.

allow

Chỉ định Chính sách quyền cho <iframe>. Chính sách xác định các tính năng có sẵn cho <iframe> (ví dụ: quyền truy cập vào microphone, camera, pin, web-share, v.v.) dựa trên origin của yêu cầu.

Xem iframes trong chủ đề Permissions-Policy để biết các ví dụ.

Note: Chính sách quyền được chỉ định bởi thuộc tính allow triển khai hạn chế thêm trên chính sách được chỉ định trong header Permissions-Policy. Nó không thay thế chính sách đó.

allowfullscreen

Đặt thành true nếu <iframe> có thể kích hoạt chế độ toàn màn hình bằng cách gọi phương thức requestFullscreen().

Note: Thuộc tính này được coi là thuộc tính kế thừa và được định nghĩa lại thành allow="fullscreen *".

allowpaymentrequest Deprecated Non-standard

Đặt thành true nếu <iframe> cross-origin được phép gọi Payment Request API.

Note: Thuộc tính này được coi là thuộc tính kế thừa và được định nghĩa lại thành allow="payment *".

browsingtopics Non-standard Deprecated

Thuộc tính boolean, nếu có, chỉ định rằng các chủ đề được chọn cho người dùng hiện tại nên được gửi cùng với yêu cầu cho nguồn của <iframe>. Xem Using the Topics API để biết thêm chi tiết.

credentialless Experimental

Đặt thành true để làm cho <iframe> không có thông tin xác thực, nghĩa là nội dung của nó sẽ được tải trong ngữ cảnh mới, tạm thời. Nó không có quyền truy cập vào mạng, cookie và dữ liệu lưu trữ liên quan đến origin của nó. Nó sử dụng ngữ cảnh mới cục bộ cho vòng đời tài liệu cấp cao nhất. Đổi lại, các quy tắc nhúng Cross-Origin-Embedder-Policy (COEP) có thể được dỡ bỏ, vì vậy các tài liệu có COEP được đặt có thể nhúng các tài liệu bên thứ ba không có điều đó. Xem IFrame credentialless để biết thêm chi tiết.

csp Experimental

Chính sách bảo mật nội dung được áp dụng cho tài nguyên được nhúng. Xem HTMLIFrameElement.csp để biết chi tiết.

height

Chiều cao của khung tính bằng CSS pixels. Mặc định là 150.

loading

Cho biết khi nào trình duyệt nên tải iframe:

eager

Tải iframe ngay khi tải trang (đây là giá trị mặc định).

lazy

Trì hoãn việc tải iframe cho đến khi nó đến khoảng cách tính toán từ khung nhìn trực quan, được xác định bởi trình duyệt. Mục đích là tránh sử dụng băng thông mạng và lưu trữ cần thiết để tải khung cho đến khi trình duyệt chắc chắn rằng nó sẽ cần. Điều này cải thiện hiệu suất và chi phí trong hầu hết các trường hợp sử dụng điển hình, đặc biệt bằng cách giảm thời gian tải trang ban đầu.

Note: Việc tải chỉ bị trì hoãn khi JavaScript được bật. Đây là biện pháp chống theo dõi.

name

Tên có thể nhắm mục tiêu cho ngữ cảnh duyệt web nhúng. Tên này có thể được sử dụng trong thuộc tính target của các phần tử <a>, <form> hoặc <base>; thuộc tính formtarget của các phần tử <input> hoặc <button>; hoặc tham số windowName trong phương thức window.open(). Ngoài ra, tên trở thành thuộc tính của các đối tượng Window và Document, chứa tham chiếu đến cửa sổ nhúng hoặc chính phần tử đó.

privateToken Experimental

Chứa biểu diễn chuỗi của đối tượng tùy chọn đại diện cho thao tác private state token; đối tượng này có cấu trúc tương tự như thuộc tính privateToken của dictionary RequestInit. Các IFrame chứa thuộc tính này có thể khởi tạo các thao tác như phát hành hoặc đổi token khi nội dung nhúng của chúng được tải.

referrerpolicy

Cho biết referrer nào sẽ gửi khi tải tài nguyên của khung:

no-referrer

Header Referer sẽ không được gửi.

no-referrer-when-downgrade

Header Referer sẽ không được gửi đến origin không có TLS (HTTPS).

origin

Referrer được gửi sẽ bị giới hạn ở origin của trang tham chiếu: scheme, host và port của nó.

origin-when-cross-origin

Referrer được gửi đến các origin khác sẽ bị giới hạn ở scheme, host và port. Các điều hướng trên cùng origin vẫn sẽ bao gồm đường dẫn.

same-origin

Referrer sẽ được gửi cho cùng origin, nhưng các yêu cầu cross-origin sẽ không chứa thông tin referrer.

strict-origin

Chỉ gửi origin của tài liệu như referrer khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS→HTTPS), nhưng không gửi đến đích kém bảo mật hơn (HTTPS→HTTP).

strict-origin-when-cross-origin (mặc định)

Gửi URL đầy đủ khi thực hiện yêu cầu cùng origin, chỉ gửi origin khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS→HTTPS), và không gửi header đến đích kém bảo mật hơn (HTTPS→HTTP).

unsafe-url

Referrer sẽ bao gồm origin và đường dẫn (nhưng không bao gồm fragment, password hoặc username). Giá trị này không an toàn, vì nó rò rỉ origin và đường dẫn từ các tài nguyên được bảo vệ TLS đến các origin không an toàn.

sandbox

Kiểm soát các hạn chế được áp dụng cho nội dung nhúng trong <iframe>. Giá trị của thuộc tính có thể để trống để áp dụng tất cả các hạn chế, hoặc các token cách nhau bằng dấu cách để dỡ bỏ các hạn chế cụ thể:

allow-downloads

Cho phép tải file qua phần tử <a> hoặc <area> với thuộc tính download, cũng như qua điều hướng dẫn đến việc tải file. Điều này hoạt động bất kể người dùng có nhấp vào liên kết hay code JS khởi tạo nó không có tương tác người dùng.

allow-forms

Cho phép trang gửi form. Nếu từ khóa này không được sử dụng, form sẽ được hiển thị bình thường, nhưng việc gửi sẽ không kích hoạt kiểm tra nhập liệu, gửi dữ liệu đến máy chủ web hoặc đóng hộp thoại.

allow-modals

Cho phép trang mở cửa sổ modal bằng Window.alert(), Window.confirm(), Window.print() và Window.prompt(), trong khi mở <dialog> được phép bất kể từ khóa này. Nó cũng cho phép trang nhận sự kiện BeforeUnloadEvent.

allow-orientation-lock

Cho phép tài nguyên khóa hướng màn hình.

allow-pointer-lock

Cho phép trang sử dụng Pointer Lock API.

allow-popups

Cho phép popup (được tạo, ví dụ, bởi Window.open() hoặc target="_blank"). Nếu từ khóa này không được sử dụng, các chức năng đó sẽ âm thầm thất bại.

allow-popups-to-escape-sandbox

Cho phép tài liệu sandbox mở ngữ cảnh duyệt web mới mà không buộc cờ sandbox lên nó. Điều này sẽ cho phép, ví dụ, quảng cáo bên thứ ba được sandbox an toàn mà không buộc các hạn chế tương tự lên trang mà quảng cáo liên kết đến. Nếu cờ này không được bao gồm, trang được chuyển hướng, cửa sổ popup hoặc tab mới sẽ tuân theo cùng các hạn chế sandbox như <iframe> gốc.

allow-presentation

Cho phép trình nhúng kiểm soát liệu iframe có thể bắt đầu phiên trình bày hay không.

allow-same-origin

Nếu token này không được sử dụng, tài nguyên được coi là từ một origin đặc biệt luôn thất bại same-origin policy (có thể ngăn quyền truy cập vào lưu trữ dữ liệu/cookie và một số API JavaScript).

Note: Khi allow-same-origin hiện diện, tài liệu cha cùng origin vẫn có thể truy cập và tương tác với DOM của iframe ngay cả khi allow-scripts không được đặt. Token allow-scripts chỉ kiểm soát việc thực thi script trong ngữ cảnh duyệt web nhúng và không ảnh hưởng đến quyền truy cập DOM từ cha.

allow-scripts

Cho phép trang chạy script (nhưng không tạo cửa sổ popup). Nếu từ khóa này không được sử dụng, thao tác này không được phép.

allow-storage-access-by-user-activation Experimental

Cho phép tài liệu được tải trong <iframe> sử dụng Storage Access API để yêu cầu quyền truy cập vào cookie không phân vùng.

allow-top-navigation

Cho phép tài nguyên điều hướng ngữ cảnh duyệt web cấp cao nhất (được đặt tên _top).

allow-top-navigation-by-user-activation

Cho phép tài nguyên điều hướng ngữ cảnh duyệt web cấp cao nhất, nhưng chỉ khi được khởi tạo bởi hành động của người dùng.

allow-top-navigation-to-custom-protocols

Cho phép điều hướng đến các giao thức không phải http được tích hợp vào trình duyệt hoặc đã đăng ký bởi trang web. Tính năng này cũng được kích hoạt bởi từ khóa allow-popups hoặc allow-top-navigation.

Note:

• Khi tài liệu nhúng có cùng origin với trang nhúng, rất không khuyến nghị sử dụng cả allow-scripts và allow-same-origin, vì điều đó cho phép tài liệu nhúng xóa thuộc tính sandbox — làm cho nó không còn an toàn hơn so với việc không sử dụng thuộc tính sandbox chút nào.
• Sandbox vô dụng nếu kẻ tấn công có thể hiển thị nội dung bên ngoài iframe được sandbox — chẳng hạn nếu người xem mở khung trong tab mới. Nội dung như vậy cũng nên được phục vụ từ origin riêng biệt để hạn chế thiệt hại tiềm tàng.

Note: Khi chuyển hướng người dùng, mở cửa sổ popup hoặc mở tab mới từ trang nhúng trong <iframe> với thuộc tính sandbox, ngữ cảnh duyệt web mới sẽ tuân theo cùng các hạn chế sandbox. Điều này có thể tạo ra vấn đề — ví dụ: nếu trang được nhúng trong <iframe> không có sandbox="allow-forms" hoặc sandbox="allow-popups-to-escape-sandbox" mở trang mới trong tab riêng, việc gửi form trong ngữ cảnh duyệt web mới đó sẽ âm thầm thất bại.

src

URL của trang cần nhúng. Sử dụng giá trị about:blank để nhúng trang trống tuân theo chính sách cùng origin. Cũng lưu ý rằng việc xóa thuộc tính src của <iframe> theo chương trình (ví dụ: qua Element.removeAttribute()) sẽ khiến about:blank được tải trong khung trong Firefox (từ phiên bản 65), các trình duyệt dựa trên Chromium và Safari/iOS.

Note: Trang about:blank sử dụng URL của tài liệu nhúng làm URL cơ sở khi giải quyết bất kỳ URL tương đối nào, chẳng hạn như liên kết anchor.

srcdoc

HTML nội tuyến để nhúng, ghi đè thuộc tính src. Nội dung của nó phải tuân theo cú pháp của tài liệu HTML đầy đủ, bao gồm chỉ thị doctype, thẻ <html>, <body>, v.v., mặc dù hầu hết trong số đó có thể bị bỏ qua, chỉ để lại nội dung body. Tài liệu này sẽ có about:srcdoc là vị trí của nó. Nếu trình duyệt không hỗ trợ thuộc tính srcdoc, nó sẽ quay về URL trong thuộc tính src.

Note: Trang about:srcdoc sử dụng URL của tài liệu nhúng làm URL cơ sở khi giải quyết bất kỳ URL tương đối nào, chẳng hạn như liên kết anchor.

width

Chiều rộng của khung tính bằng CSS pixels. Mặc định là 300.

Thuộc tính không còn dùng

Các thuộc tính này đã không còn được dùng và có thể không còn được hỗ trợ bởi tất cả các tác nhân người dùng. Bạn không nên sử dụng chúng trong nội dung mới, và cố gắng xóa chúng khỏi nội dung hiện có.

align Deprecated

Căn chỉnh của phần tử này so với ngữ cảnh xung quanh.

frameborder Deprecated

Giá trị 1 (mặc định) vẽ đường viền xung quanh khung này. Giá trị 0 xóa đường viền xung quanh khung này, nhưng thay vào đó bạn nên sử dụng thuộc tính CSS border để kiểm soát đường viền <iframe>.

longdesc Deprecated

URL của mô tả dài về nội dung khung. Do bị lạm dụng phổ biến, thuộc tính này không hữu ích cho các trình duyệt không nhìn thấy.

marginheight Deprecated

Khoảng cách tính bằng pixel giữa nội dung khung và đường viền trên và dưới của nó.

marginwidth Deprecated

Khoảng cách tính bằng pixel giữa nội dung khung và đường viền trái và phải của nó.

scrolling Deprecated

Cho biết khi nào trình duyệt cần cung cấp thanh cuộn cho khung:

auto

Chỉ khi nội dung khung lớn hơn kích thước của nó.

yes

Luôn hiển thị thanh cuộn.

no

Không bao giờ hiển thị thanh cuộn.

Scripting

Các frame nội tuyến, như các phần tử <frame>, được bao gồm trong mảng giả window.frames.

Với đối tượng DOM HTMLIFrameElement, các script có thể truy cập đối tượng window của tài nguyên trong khung qua thuộc tính contentWindow. Thuộc tính contentDocument tham chiếu đến document bên trong <iframe>, giống như contentWindow.document.

Từ bên trong khung, một script có thể lấy tham chiếu đến cửa sổ cha bằng window.parent.

Quyền truy cập script vào nội dung khung tuân theo chính sách cùng origin. Các script không thể truy cập hầu hết các thuộc tính trong các đối tượng window khác nếu script được tải từ origin khác, bao gồm các script trong khung truy cập cha của khung. Giao tiếp cross-origin có thể đạt được bằng cách sử dụng Window.postMessage().

Điều hướng top trong các frame cross-origin

Các script chạy trong frame cùng origin có thể truy cập thuộc tính Window.top và đặt window.top.location để chuyển hướng trang cấp cao nhất đến vị trí mới. Hành vi này được gọi là "điều hướng top".

Frame cross-origin được phép chuyển hướng trang cấp cao nhất bằng top chỉ khi frame có kích hoạt dính. Nếu điều hướng top bị chặn, trình duyệt có thể nhắc xin phép người dùng để chuyển hướng hoặc báo cáo lỗi trong bảng điều khiển nhà phát triển (hoặc cả hai). Hạn chế này của trình duyệt được gọi là framebusting intervention. Điều này có nghĩa là frame cross-origin không thể chuyển hướng trang cấp cao nhất ngay lập tức — người dùng phải trước đó đã tương tác với frame hoặc cấp quyền chuyển hướng.

Frame sandbox chặn tất cả điều hướng top trừ khi giá trị thuộc tính sandbox được đặt thành allow-top-navigation hoặc allow-top-navigation-by-user-activation. Lưu ý rằng quyền điều hướng top được kế thừa, vì vậy frame lồng nhau chỉ có thể thực hiện điều hướng top nếu các frame cha của nó cũng được phép.

Định vị và thu phóng

Là phần tử thay thế, <iframe> cho phép điều chỉnh vị trí của tài liệu nhúng trong hộp của nó bằng thuộc tính object-position.

Hành vi sự kiện error và load

Các sự kiện error và load được kích hoạt trên <iframe> có thể được sử dụng để dò không gian URL của các máy chủ HTTP mạng cục bộ. Do đó, như một biện pháp bảo mật, các tác nhân người dùng không kích hoạt sự kiện error trên <iframe>, và sự kiện load luôn được kích hoạt ngay cả khi nội dung <iframe> không tải được.

Khả năng tiếp cận

Những người điều hướng bằng công nghệ hỗ trợ như trình đọc màn hình có thể sử dụng thuộc tính title trên <iframe> để gán nhãn nội dung của nó. Giá trị của tiêu đề cần mô tả ngắn gọn nội dung nhúng:

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Không có tiêu đề này, họ phải điều hướng vào <iframe> để xác định nội dung nhúng là gì. Sự thay đổi ngữ cảnh này có thể gây nhầm lẫn và tốn thời gian, đặc biệt cho các trang có nhiều <iframe> và/hoặc nếu các nhúng chứa nội dung tương tác như video hoặc âm thanh.

Ví dụ

<iframe> cơ bản

Ví dụ này nhúng trang tại https://example.org trong một iframe. Đây là trường hợp sử dụng phổ biến của iframe: nhúng nội dung từ một trang khác. Ví dụ, bản thân mẫu trực tiếp và ví dụ thử nghiệm ở trên đều là nhúng <iframe> nội dung từ một trang MDN khác.

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

Kết quả

Nhúng mã nguồn trong <iframe>

Ví dụ này kết xuất trực tiếp mã nguồn trong một iframe. Điều này có thể được sử dụng như một kỹ thuật để ngăn tiêm script khi hiển thị nội dung do người dùng tạo, khi kết hợp với thuộc tính sandbox.

Lưu ý rằng khi sử dụng srcdoc, bất kỳ URL tương đối nào trong nội dung nhúng sẽ được giải quyết tương đối với URL của trang nhúng. Nếu bạn muốn sử dụng liên kết anchor trỏ đến các vị trí trong nội dung nhúng, bạn cần chỉ định rõ ràng about:srcdoc làm URL cơ sở.

HTML

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

Đây là cách viết các chuỗi thoát khi sử dụng srcdoc:

• Đầu tiên, viết HTML, thoát bất cứ thứ gì bạn sẽ thoát trong tài liệu HTML thông thường (chẳng hạn như <, >, &, v.v.).
• < và < đại diện cho cùng ký tự trong thuộc tính srcdoc. Do đó, để làm cho nó trở thành chuỗi thoát thực sự trong tài liệu HTML, hãy thay thế bất kỳ dấu và (&) nào bằng &. Ví dụ: < trở thành <, và & trở thành &.
• Thay thế bất kỳ dấu ngoặc kép đôi (") bằng " để ngăn thuộc tính srcdoc bị kết thúc sớm (nếu bạn sử dụng ' thay thế, thì bạn nên thay thế ' bằng ' thay thế). Bước này xảy ra sau bước trước, vì vậy " được tạo ra trong bước này không trở thành ".

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• CSP: frame-ancestors
• Quyền riêng tư, quyền hạn và bảo mật thông tin