Mục lục

Hướng dẫn sử dụng HTML IFrame

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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:
  • TODO Link!
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:

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>.
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.
allow-orientation-lock
allow-popups-to-escape-sandbox
allow-presentation

Xem thêm các chuyên mục: