Hướng dẫn và ví dụ HTML IFrame

HTML iframe
width, height
srcdoc
name
sandbox

1. HTML iframe

Trong HTML, thẻ <iframe> được sử dụng để hiển thị một trang bên trong một trang khác.

Dưới đây là cú pháp đơn giản nhất để bạn tạo một <iframe>:

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

Danh sách các thuộc tính (attribute) của <iframe>:

Thuộc tính (Attribute)	Giá trị	Mô tả
src	URL	Chỉ định địa chỉ của tài liệu để nhúng vào <iframe>.
srcdoc	HTML_code	Chỉ định nội dung HTML của trang để hiển thị trong <iframe>.
name	text	Chỉ định tên của <iframe>.
height	pixels	Chỉ định chiều cao của <iframe>. Giá trị mặc định 150 pixel.
width	pixels	Chỉ định chiều rộng của <iframe>. Giá trị mặc định 300 pixel.
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Cho phép thiết lập một vài hạn chế (restrictions) đối với nội dung trong <iframe>.

Chú ý: Có một vài thuộc tính của HTML4.1 <iframe> nhưng không còn được hỗ trợ trong HTML5, chúng bao gồm: align, frameborder, longdesc, marginheight, marginwidth, scrolling.

Thẻ <iframe> cũng hỗ trợ các thuộc tính tiêu chuẩn trong HTML:

HTML Global Attributes

Xem thêm, sử dụng Javascript để làm việc với hệ thống phân cấp của các Frame:
Hướng dẫn và ví dụ Javascript Window

2. width, height

Thuộc tính width, height giúp bạn chỉ định chiều rộng, chiều cao theo đơn vị pixel cho <iframe>, giá trị mặc định của (width,height) = (300px,150px).

width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head> 
<body>
  <h3>iframe - width/height:</h3>

  <iframe src='child.html'
      width= 300 height = 100
      style="border:1px solid black"></iframe>
</body>
</html>

Bạn cũng có thể sử dụng CSS để thiết lập chiều rộng và chiều cao cho <iframe>:

css-width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - width/height:</h3>
  <iframe src='child.html'
      style="width:300px;height:100px;border:1px solid black"></iframe>
</body>
</html>

vw, vh

Trong CSS, đơn vị tính vw là viết tắt của Viewport Width, và vh là viết tắt của Viewport Height.

20vw = 20% Viewport Width
100vw = 100% Viewport Width
20vh = 20% Viewport Height
100vh = 100% Viewport Height
...

Ví dụ dưới đây sử dụng CSS để thiết lập chiều rộng 100%, chiều cao 100% cho <iframe>:

width-height-100-vw-vh.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe:</h3>
  <p>style={width:100vw; height:100vh}</p>
  <iframe src='child.html'
      style="border:1px solid black;width:100%;height:100vh;"></iframe>
  <br/>
</body>
</html>

Ngoài ra có 2 cách tiếp cận khác giúp bạn thiết lập chiều rộng 100% và chiều cao 100% cho <iframe>:

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

Hoặc:

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

3. srcdoc

Thuộc tính srcdoc chỉ định một nội dung HTML để hiển thị trong <iframe>.

srcdoc-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
  <script>
     function setNewContentForIframe() {
        var div = document.getElementById("mydiv");
        document.getElementById("myframe").srcdoc = div.innerHTML;
     }
  </script>
</head>
<body>
  <h3>iframe - srcdoc:</h3>

  <iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
      height ="100"
      style="border:1px solid black"></iframe>
  <p>Div</p>
  <div style="background: #e5e7e9;padding:5px;" id="mydiv">
      <h4>Content in a div</h4>
      Content in a div
  </div>
  <br/>
  <button onClick="setNewContentForIframe()">Set new Content for Iframe</button>
  <a href="">Reset</a>
</body>
</html>

4. name

Tên của <iframe> có thể được sử dụng như một target (mục tiêu) cho thẻ <a>:

name-example.html

<!DOCTYPE html>
<html>
<head>
  <title>iframe name</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - name:</h3>
  <a href="child.html" target="myframe">Open Link in 'myframe'</a>
  <br/><br/>
  <iframe src=''
         style="border:1px solid black" name="myframe"></iframe>
  <br/>
  <a href="">Reset</a>
</body>
</html>

5. sandbox

Thuộc tính sandbox được sử dụng để áp dụng các hạn (restriction) chế bổ xung cho <iframe>.

Thuộc tính sandbox có thể nhận một trong các giá trị dưới đây, hoặc nhiều giá trị cách nhau bởi khoảng trắng. Nếu giá trị của sandbox là rỗng nghĩa là tất cả các hạn chế sẽ được áp dụng.

allow-forms

Cho phép FORM trong <iframe> được submit. Nếu bạn sử dụng thuộc tính sandbox cho <iframe> nhưng giá trị của nó không chứa từ khóa "allow-forms" điều đó có nghĩa là hành động submit của FORM trong <iframe> sẽ bị vô hiệu hóa.

allow-modals

Cho phép các hàm alert(), confirm(), prompt() hoạt động trong <iframe>.

Hộp thoại Alert, Confirm, Prompt trong Javascript

allow-popups

Từ khóa allow-popups cho phép <iframe> mở ra một cửa sổ mới, chẳng hạn như được phép sử dụng window.open(), showModalDialog(), và <a target="_blank">. Nếu <iframe> có thuộc tính sandbox nhưng giá trị của nó không bao gồm từ khóa allow-popups nghĩa là bạn không thể mở ra một cửa sổ mới từ <iframe> này.

allow-scripts

Cho phép <iframe> chạy các Script, nhưng không được phép tạo ra các cửa sổ popup.

allow-top-navigation

Cho phép <iframe> điều hướng "bối cảnh trình duyệt" (browsing context) ở mức cao nhất (top-level). Điều này có nghĩa là trong <iframe> bạn có thể sử dụng <a target="_top">, hoặc window.open(URL,"_top"), ...

allow-top-navigation-by-user-activation

Cho phép <iframe> điều hướng "bối cảnh trình duyệt" (browsing context) ở mức cao nhất (top-level), nhưng việc điều hướng đó phải xuất phát từ hành động của người dùng.

allow-same-origin

Nếu <iframe> có thuộc tính sandbox nhưng không bao gồm giá trị allow-same-origin, thì URL của <iframe> được đối xử như là nó tới từ một nơi đặc biệt, và không phù hợp với chính sách cùng nguồn gốc (same-origin policy).

allow-pointer-lock

Từ khóa allow-pointer-lock cho phép <iframe> sử dụng Pointer Lock API.

Pointer Lock API cho phép khóa (lock) con trỏ trong một khu vực, nó đảm bảo rằng mọi sự kiện của con trỏ vẫn được khu vực đó giám sát kể cả khi con trỏ thoát ra khỏi ranh giới của khu vực này. API này có ích trong các trò chơi 3D chạy trên trình duyệt, người dùng vẫn có thể điều khiển trò chơi cả khi con trỏ ra khỏi bề mặt giao diện của trò chơi.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

allow-orientation-lock

allow-popups-to-escape-sandbox

allow-presentation