Hướng Dẫn Và Ví Dụ HTML IFrame - Openplanning
Có thể bạn quan tâm
- Tất cả tài liệu
- Java
- Java Basic
- Java Collections Framework
- Java IO
- Java New IO
- Java Date Time
- Servlet/JSP
- Eclipse Tech
- SWT
- RCP
- RAP
- Eclipse Plugin Tools
- XML & HTML
- Java Opensource
- Java Application Servers
- Maven
- Gradle
- Servlet/Jsp
- Thymeleaf
- Spring
- Spring Boot
- Spring Cloud
- Struts2
- Hibernate
- Java Web Service
- JavaFX
- SWT
- Oracle ADF
- Android
- iOS
- Python
- Swift
- C#
- C/C++
- Ruby
- Dart
- Batch
- Database
- Oracle
- MySQL
- SQL Server
- PostGres
- Other Database
- Oracle APEX
- Report
- Client
- ECMAScript / Javascript
- TypeScript
- NodeJS
- ReactJS
- Flutter
- AngularJS
- HTML
- CSS
- Bootstrap
- OS
- Ubuntu
- Solaris
- Mac OS
- VPS
- Git
- SAP
- Amazon AWS
- Khác
- Chưa phân loại
- Phần mềm & ứng dụng tiện ích
- VirtualBox
- VmWare
- 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>. |
- 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, vhTrong 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
- ...
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-formsCho 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-modalsCho phép các hàm alert(), confirm(), prompt() hoạt động trong <iframe>.- Hộp thoại Alert, Confirm, Prompt trong Javascript
- https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Các hướng dẫn HTML
- Giới thiệu về HTML
- Trình soạn thảo HTML
- Cài đặt trình soạn thảo Atom
- Cài đặt Atom HTML Preview
- Cài đặt Atom-Beautify
- Bắt đầu với HTML
- Hướng dẫn và ví dụ HTML Styles
- Hướng dẫn và ví dụ HTML Hyperlink
- Hướng dẫn và ví dụ HTML Email Link
- Hướng dẫn và ví dụ HTML Paragraphs
- Hướng dẫn và ví dụ HTML IFrame
- Hướng dẫn và ví dụ HTML Images
- Hướng dẫn và ví dụ HTML Entity
- Hướng dẫn và ví dụ HTML Lists
- Hướng dẫn và ví dụ HTML Tables
- Hướng dẫn và ví dụ HTML Col, Colgroup
- Hướng dẫn và ví dụ HTML Block/Inline Elements
- Hướng dẫn và ví dụ HTML Heading
- Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
- Hướng dẫn và ví dụ HTML URL Encoding
- Hướng dẫn và ví dụ HTML Video
- Hướng dẫn và ví dụ thuộc tính HTML dir
- Các hướng dẫn Bootstrap
- Các hướng dẫn CSS
![](https://s1.o7planning.com/ads/giacat.png)
Các hướng dẫn HTML
- Giới thiệu về HTML
- Trình soạn thảo HTML
- Cài đặt trình soạn thảo Atom
- Cài đặt Atom HTML Preview
- Cài đặt Atom-Beautify
- Bắt đầu với HTML
- Hướng dẫn và ví dụ HTML Styles
- Hướng dẫn và ví dụ HTML Hyperlink
- Hướng dẫn và ví dụ HTML Email Link
- Hướng dẫn và ví dụ HTML Paragraphs
- Hướng dẫn và ví dụ HTML IFrame
- Hướng dẫn và ví dụ HTML Images
- Hướng dẫn và ví dụ HTML Entity
- Hướng dẫn và ví dụ HTML Lists
- Hướng dẫn và ví dụ HTML Tables
- Hướng dẫn và ví dụ HTML Col, Colgroup
- Hướng dẫn và ví dụ HTML Block/Inline Elements
- Hướng dẫn và ví dụ HTML Heading
- Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
- Hướng dẫn và ví dụ HTML URL Encoding
- Hướng dẫn và ví dụ HTML Video
- Hướng dẫn và ví dụ thuộc tính HTML dir
- Các hướng dẫn Bootstrap
- Các hướng dẫn CSS
Các bài viết mới nhất
- So sánh Amazon S3 Rest API Endpoint và S3 Web Endpoint
- Giới thiệu về Amazon ACM
- Yêu cầu chứng chỉ SSL từ Amazon ACM
- Chuyển (transfer) đăng ký tên miền tới Amazon Route 53
- Di chuyển (migrate) dịch vụ DNS tới Amazon Route 53
- Vô hiệu hoá bộ nhớ đệm CloudFront
- Chuyển hướng trong S3 Website với x-amz-website-redirect-location
- Cấu hình các trang phản hồi lỗi cho CloudFront
- Tạo bản phân phối CloudFront cho S3 Bucket
- Công cụ tạo các chính sách cho AWS - policygen
- Tạo các chính sách S3 Bucket
- Cấu hình tên miền tuỳ chỉnh và SSL cho bản phân phối CloudFront
- Cấu hình tên miền tuỳ chỉnh cho website tĩnh Amazon S3
- Các quy tắc chuyển hướng cho S3 Static Website
- Tạo một vùng chứa Amazon S3 (S3 Bucket)
- Lưu trữ (host) một Website tĩnh trên Amazon S3
- Các kiểu JPA Join và cú pháp trong JPQL
- Bắt đầu với JPA Criteria Query API
- Tìm nạp dữ liệu với Spring Data JPA DTO Projections
- Liệt kê, thêm và xoá các Sites với Google Search Java API
- Các hướng dẫn HTML
Từ khóa » Cách Sử Dụng Iframe
-
IFrame Là Gì? Cách Nhúng IFrame Vào Website Sao Cho Tối ưu Nhất?
-
Thẻ IFrame Trong HTML Là Gì? Cách Sử Dụng IFrame Trong HTML
-
Cách Nhúng Một Trang Web Bằng Thẻ Iframe Trong HTML
-
IFRAME VÀ CÁCH GIAO TIẾP GIỮA IFRAME VÀ MAIN PAGE - Viblo
-
IFrame Là Gì? Cách Nhúng IFrame Vào Website Sao Cho Tối ưu Nhất
-
Iframe | Tag Html | Học Web Chuẩn
-
Iframe Là Gì? Hướng Dẫn Cách Nhúng Iframe Vào Web Hiệu Quả - Bizfly
-
IFrame Là Gì?
-
Bài 22: Thẻ Iframe Trong HTML - Tìm ở đây
-
Iframe Là Gì? Cách Nhúng Iframe Vào Website? - Bizfly Cloud
-
Thẻ IFRAME Trong HTML – Nhúng Trang Web Khác Vào Web Của Mình
-
IFrame Là Gì? Hướng Dẫn Nhúng IFrame Vào Website đơn Giản
-
Iframe Là Gì? Tất Cả Thông Tin [CẦN BIẾT] Về Iframe - Nhân Hòa
-
IFrame Là Gì? Cách Nhúng IFrame Vào Web - Thủ Thuật Phần Mềm