Mục lục
Hướng dẫn và ví dụ HTML IFrame
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
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:
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%;
}
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>
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>
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
*
