Iframe trong HTML


Thẻ <iframe>

Thẻ <iframe> được dùng để chèn nội dung của một trang web khác (đã có từ trước) vào một phần của trang web đang thiết kế.

Cú pháp thường dùng của thẻ <iframe>:

<iframe src="/URL"></iframe>

Thuộc tính src dùng để chỉ trang web sẽ hiển thị trong iframe.


Iframe - chiều rộng và chiều cao

Quy định chiều rộng và chiều cao cho vùng thẻ iframe bằng thuộc tính widthheight.

Bạn có thể không dùng đơn vị (mặc định là pixel), hoặc px hay phần trăm.

Ví dụ:

<iframe src="https://tbit.vn" width="600" height="200"></iframe>

See the Pen gpQxXB by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 


Đường viền của Iframe

Theo mặc định, iframe có 1 đường viền màu đen bao quanh. Tuy nhiên, bạn có thể dùng CSS để định dạng lại hay xóa đường viền này.

Ví dụ về xóa đường viền:

<iframe src="https://tbit.vn" style="border:none"></iframe>

Ví dụ về đường viền chấm:

<iframe src="https://tbit.vn" style="border:5px dotted red"></iframe>

Dùng iframe như một đích tới của liên kết

Dùng thuộc tính target của thẻ <a> kết hợp với thuộc tính name của thẻ <iframe> để chỉ rõ liên kết được nhấn sẽ hiển thị ở đâu.

Ví dụ:

<iframe width="100%" height="300px" src="http://tut.tbit.vn" name="iframe_a"></iframe>
<p><a href="https://tbit.vn" target="iframe_a">TBit - Diễn đàn công nghệ số</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

See the Pen mJQMpG by Nguyễn Duy Hiếu (@hieu3210) on CodePen.