HTML Iframes
Một HTML iframe được sử dụng để hiển thị một trang web bên trong một trang web.
Cú pháp iframe
Một HTML iframe được định nghĩa bằng thẻ <iframe> :
<iframe src="URL"></iframe>
Thuộc tính src xác định URL (địa chỉ trang web) của khung trang nội tuyến.
Iframe - Đặt chiều cao và chiều rộng
Sử dụng các thuộc tính height và width để xác định kích thước của iframe.
Chiều cao và chiều rộng được xác định dưới dang pixel theo mặc định:
ví dụ
<iframe src="demo_iframe.htm" height="200" width="300"></iframe><!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
</body>
</html>
Hoặc bạn có thể sử dụng CSS để đặt chiều cao vào chiều rộng của iframe:
ví dụ
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe><!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" style="height:200px;width:300px"></iframe>
</body>
</html>
Iframe - Loại bỏ viền
Theo mặc định, một iframe có một đường viền xung quanh nó.
Để loại bỏ đường viền, thêm thuộc tính style và sử dụng thuộc tính CSS border :
ví dụ
<iframe src="demo_iframe.htm" style="border:none;"></iframe><!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
</body>
</html>
Với CSS, bạn cũng có thể thay đổi kích cỡ, phong cách và màu của đường viền iframe:
ví dụ
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe><!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
</body>
</html>
Iframe - Mục tiêu cho một liên kết
Một iframe có thể được sử dụng như khung mục tiêu cho một đường dẫn.
Thuộc tính target của đường dẫn phải tham chiếu đến thuộc tính name của iframe:
ví dụ
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p><!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
Tags: