HTML iFrame
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 - Khung nội tuyến hoặc khung nội tuyến đượ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. Khung nội tuyến 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:
<iframe src="URL"></iframe>
URL được chỉ định trong thuộc tính srctrỏ đế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ị tệp "hello.html" bên trong iframe trong tài liệu hiện tại.
Ví dụ
<iframe src="hello.html"></iframe>Đặt chiều rộng và chiều cao của iFrame
Các thuộc tínhheightvàwidthđược sử dụng để xác định chiều cao và chiều rộng của khung nội tuyến.
Ví dụ
<iframe src="hello.html" width="400" height="200"></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:
Ví dụ
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>Vui lòng xem hướng dẫn vềcác kiểu 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ị thuộc tínhwidth và thuộc tínhheightđượ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
Khung nội tuyến 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 CSSborder.
Ví dụ sau sẽ chỉ hiển thị iframe mà không có bất kỳ đường viền nào.
Ví dụ
<iframe src="hello.html" style="border: none;"></iframe>Tương tự, bạn có thể sử dụng thuộc tínhborderđể 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 2 pixel.
Ví dụ
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>Sử dụng iFrame làm Mục tiêu liên kết
Một iframe cũng có thể được sử dụng làm mục tiêu cho cácsiêu liên kết.
Một iframe có thể được đặt tên bằng cách sử dụng thuộc tínhname.Điều này ngụ ý rằng khi một liên kết có thuộc tínhtargetvới tên đó là giá trị đượ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:
Ví dụ
<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://vzn.vn" target="myFrame">VZN.vn</a></p>