- Trung Nguyen
04/08/2021
3 min read
Trong hướng dẫn này, bạn sẽ học cách sử dụng iframe để hiển thị một trang web trong một trang web khác.
iframe là gì?
iframe được sử dụng để hiển thị các đối tượng bên ngoài bao gồm các trang web khác trong một trang web. iframe hoạt động giống như một trình duyệt web nhỏ trong trình duyệt web. Ngoài ra, nội dung bên trong iframe tồn tại hoàn toàn độc lập với các phần tử xung quanh.
Cú pháp cơ bản để thêm iframe vào một trang web như sau:
URL được chỉ định trong thuộc tính src
trỏ đến vị trí của một đối tượng bên ngoài hoặc một trang web.
Ví dụ sau hiển thị file "hello.html" bên trong iframe trong tài liệu hiện tại.
Đặt chiều rộng và chiều cao của iframe
Các thuộc tính height
và width
được sử dụng để chỉ định chiều cao và chiều rộng của iframe.
Bạn cũng có thể sử dụng CSS để đặt chiều rộng và chiều cao của iframe, như được hiển thị ở đây:
Vui lòng xem hướng dẫn về style CSS trong HTML để tìm hiểu các phương pháp áp dụng CSS cho các phần tử HTML.
Lưu ý: Giá trị các thuộc tínhwidth
vàheight
được chỉ định theo pixel theo mặc định, nhưng bạn cũng có thể đặt các giá trị này theo tỷ lệ phần trăm, chẳng hạn như 50%, 100%, v.v. Chiều rộng mặc định của iframe là 300 pixel, trong khi chiều cao mặc định là 150 pixel.
Loại bỏ frameborder mặc định
iframe có đường viền xung quanh theo mặc định. Tuy nhiên, nếu bạn muốn sửa đổi hoặc loại bỏ các đường viền iframe, cách tốt nhất là sử dụng thuộc tính
border
trong CSS.
Ví dụ sau sẽ chỉ hiển thị iframe mà không có bất kỳ đường viền nào.
Tương tự, bạn có thể sử dụng thuộc tính border
để thêm các đường viền bạn chọn vào iframe. Ví dụ sau sẽ hiển thị iframe với đường viền màu xanh lam với độ rộng 2 pixel.
Sử dụng iframe làm target của liên kết
Một iframe cũng có thể được sử dụng làm target cho các liên kết.
Một iframe có thể được đặt tên bằng cách sử dụng thuộc tính name
. Điều này ngụ ý rằng khi một liên kết có thuộc tính target
có giá trị là tên của iframe thì khi liên kết được nhấp vào, tài nguyên được liên kết sẽ mở trong iframe đó.
Hãy thử một ví dụ để hiểu về cơ bản nó hoạt động như thế nào:
Mở Comdy.vn
Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gian
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
- Trang chủ
- Tham khảo
- Tag html
- html5
Định nghĩa và sử dụng
- Tag Định nghĩa một khung, bên trong có chứa một văn bản.
- Một số trình duyệt không hỗ trợ , khi đó chúng ta viết những đoạn text bên trong và để hiển thị nội dung thông báo cần thiết cho người xem biết.
Sự khác nhau giữa HTML4.01 và HTML5
- | ● Trong HTML5 có một số thuộc tính mới, và một số thay đổi cách dùng trong thuộc tính. |
Cấu trúc
Dòng text thông báo.
Ví dụ
Html viết:
Trình duyệt của bạn không hỗ trợ iframe.
Hiển thị trình duyệt:
Trình duyệt hỗ trợ
được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng:
Thuộc tính tùy chọn
Thuộc tính mới [Mới] | |||
sandbox | allow-forms allow-same-origin allow-scripts allow-top-navigation | sandbox="allow-forms" | Xác định giới hạn cho phép tới nội dung trong . |
seamless | seamless | seamless="seamless" | Chỉ định rằng sẽ được tích hợp trong văn bản. |
srcdoc | Mã HTML | mã html | Xác định rõ mã HTML của văn bản hiển thị trong . |
Thuộc tính không hỗ trợ trong HTML5 | |||
align | left right top middle bottom | align="left" | Không hỗ trợ trong HTML5 Sử dụng thuộc tính text-align của css để thay thế. |
frameborder | 1 0 | frameborder="1" | Không hỗ trợ trong HTML5. |
longdesc | URL | longdesc="des.html" | Không hỗ trợ trong HTML5. |
marginheight | pixels | marginheight="10px" | Không hỗ trợ trong HTML5. |
marginwidth | pixels | marginwidth="10px" | Không hỗ trợ trong HTML5. |
scrolling | yes no auto | scrolling="auto" | Không hỗ trợ trong HTML5. |
Thuộc tính như HTML4.01 | |||
height | pixels % | height="10px" | Xác định chiều cao của . |
name | name | name="iframeName" | Xác định tên của . |
src | URL | src="iframe.html" | Xác định đường dẫn hiển thị bên trong . |
width | pixels % | width="100px" | Xác định chiều rộng của . |
Thuộc tính Tổng quát và thuộc tính sự kiện
Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5