Hướng Dẫn Và Ví Dụ HTML IFrame - Openplanning

Trang chủ » Cách Sử Dụng Iframe » 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
Hướng dẫn và ví dụ HTML IFrame
  1. HTML iframe
  2. width, height
  3. srcdoc
  4. name
  5. 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ả
srcURLChỉ định địa chỉ của tài liệu để nhúng vào <iframe>.
srcdocHTML_codeChỉ định nội dung HTML của trang để hiển thị trong <iframe>.
nametextChỉ định tên của <iframe>.
heightpixelsChỉ định chiều cao của <iframe>. Giá trị mặc định 150 pixel.
widthpixelsChỉ định chiều rộng của <iframe>. Giá trị mặc định 300 pixel.
sandboxallow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigationCho 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, 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
  • ...
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-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
allow-popupsTừ 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-scriptsCho 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-navigationCho 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-activationCho 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-originNế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-lockTừ 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-lockallow-popups-to-escape-sandboxallow-presentation

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • 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 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 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
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • 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 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 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
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các bài viết mới nhất

  • Dart Stream Single và Broadcast
  • Xử lý lỗi trong Dart Stream
  • Hướng dẫn và ví dụ Dart Stream
  • So sánh đối tượng trong Dart với thư viện Equatable
  • Flutter BloC cho người mới bắt đầu
  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Hướng dẫn và ví dụ Flutter Radio
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Tạo Module trong Flutter
Show More
  • Các hướng dẫn HTML

Từ khóa » Cách Sử Dụng Iframe