Khung Nhúng Nội Dung HTML với Thẻ <iframe>

Giới thiệu về Thẻ </h2> <p>Thẻ <iframe> (inline frame) trong HTML cho phép nhúng một tài liệu HTML bên trong tài liệu khác. Kỹ thuật này giúp hiển thị nội dung từ các nguồn khác nhau trên cùng một trang web. Dưới đây là một số ứng dụng phổ biến của thẻ iframe:</p> <pre> <code>iframe hoạt động như một cơ chế nhúng, cho phép chèn một trang web vào trang hiện tại. Công cụ này thường được sử dụng để nhúng video, âm nhạc, tin tức, bản đồ và nhiều nội dung khác. Một số trình duyệt cũ không hỗ trợ iframe. Nếu trình duyệt không hỗ trợ, iframe sẽ không hiển thị.</code> </pre> <h2>Ứng dụng của Thẻ iframe</h2> <h3>1. Nhúng trang web từ bên ngoài</h3> <pre> <code><body> <iframe src="https://www.google.com"></iframe> </body></code> </pre> <p>Bằng cách sử dụng thuộc tính src, bạn có thể hiển thị nội dung từ một trang web khác trên trang hiện tại. Kỹ thuật này hữu ích khi cần hiển thị nội dung từ nhiều nguồn khác nhau, như nhúng video từ YouTube hoặc hiển thị nội dung từ các trang web liên kết.</p> <h3>2. Nhúng nội dung đa phương tiện</h3> <pre> <code><!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <title>Nhúng Video</title> </head> <body> <iframe src="https://example.com/video.mp4" width="800" height="450"></iframe> <p>Một số trình duyệt cũ không hỗ trợ iframe.</p> <p>Nếu trình duyệt không hỗ trợ, iframe sẽ không hiển thị.</p> </body> </html></code> </pre> <p>Thẻ iframe có thể được sử dụng để nhúng trình phát video hoặc audio. Trong trường hợp này, tài liệu được nhúng (ví dụ video.html) thường chứa các yếu tố đa phương tiện và điều khiển phát.</p> <h3>3. Kiểm soát kích thước và kiểu dáng</h3> <pre> <code><body> <iframe src="noidung.html" width="600" height="400" style="border: 1px solid #ccc; margin: 10px;"></iframe> </body></code> </pre> <p>Bằng cách sử dụng các thuộc tính width và height, bạn có thể xác định kích thước của iframe. Thuộc tính style cho phép áp dụng các kiểu CSS như thêm đường viền, căn lề hoặc nền màu.</p> <h3>4. Nhúng bản đồ địa lý</h3> <pre> <code><iframe src="https://maps.google.com/maps?q=Ha+Noi,+Vietnam&output=embed" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"> </iframe></code> </pre> <p>Dịch vụ bản đồ như Google Maps thường cung cấp mã nhúng iframe để tích hợp bản đồ vào các trang web.</p> <h3>5. Tích hợp ứng dụng bên ngoài</h3> <pre> <code> <iframe src="https://calendar.google.com/calendar/embed?src=...&ctz=..." style="border: 0" width="800" height="600" frameborder="0" scrolling="no"> </iframe></code> </pre> <p>Thẻ iframe cho phép tích hợp các ứng dụng bên ngoài như lịch, bảng tính, hoặc các công cụ trực tiếp vào trang web của bạn.</p> <h3>6. Bảo mật với thuộc tính Sandbox</h3> <p>Thẻ iframe có thuộc tính sandbox để tăng cường bảo mật. Bằng cách thêm thuộc tính sandbox, bạn có thể hạn chế hành vi của trang được nhúng, ngăn chặn mã độc ảnh hưởng đến trang cha.</p> <pre> <code><iframe src="https://example.com" sandbox="allow-same-origin allow-scripts allow-forms"> </iframe></code> </pre> <p>Lưu ý rằng khi sử dụng iframe, bạn cần chú ý đến vấn đề bảo mật, tránh nhúng nội dung không đáng tin cậy để ngăn chặn các rủi ro bảo mật tiềm ẩn.</p> <h3>7. Tương tác với JavaScript</h3> <pre> <code> <iframe id="myFrame" src="trang-nho.html" width="100%" height="300"></iframe> <script> // Lấy tham chiếu đến iframe const iframe = document.getElementById('myFrame'); // Giao tiếp với nội dung iframe (cùng nguồn) try { const iframeContent = iframe.contentWindow.document; iframeContent.body.style.backgroundColor = '#f0f0f0'; } catch (e) { console.error('Không thể truy cập iframe:', e); } </script></code> </pre> <p>JavaScript có thể tương tác với iframe nếu cả hai cùng nguồn (same-origin). Điều này cho phép trao đổi dữ liệu và điều khiển nội dung bên trong iframe.</p> <h3>8. Tối ưu hóa với thuộc tính Loading</h3> <pre> <code><iframe src="nangcao.html" width="600" height="400" loading="lazy" style="border: 1px solid #ddd"> <p>Trình duyệt của bạn không hỗ trợ iframe.</p> </iframe></code> </pre> <p>Thuộc tính loading="lazy" giúp trì hoãn việc tải iframe cho đến khi người dùng cuộn đến vị trí của nó, cải thiện hiệu suất trang web.</p> </div> <p class="blog-tags">Thẻ: <a href="https://cuong.city/tags/html">HTML</a> <a href="https://cuong.city/tags/iframe">iframe</a> <a href="https://cuong.city/tags/web%20development">Web Development</a> <a href="https://cuong.city/tags/embedding">embedding</a> <a href="https://cuong.city/tags/web%20security">Web Security</a> </p> <p class="blog-user-date">Đăng vào ngày 8 tháng 6 lúc 02:33</p> </div><div class="sidebar"> <h3>Thẻ Phổ Biến</h3> <ul class="hot-tags"> <li><a href="https://cuong.city/tags/python">python</a> - 123</li> <li><a href="https://cuong.city/tags/java">Java</a> - 122</li> <li><a href="https://cuong.city/tags/javascript">JavaScript</a> - 89</li> <li><a href="https://cuong.city/tags/c++">C++</a> - 71</li> <li><a href="https://cuong.city/tags/mysql">mysql</a> - 67</li> <li><a href="https://cuong.city/tags/linux">linux</a> - 57</li> <li><a href="https://cuong.city/tags/docker">docker</a> - 37</li> <li><a href="https://cuong.city/tags/redis">Redis</a> - 29</li> <li><a href="https://cuong.city/tags/pytorch">PyTorch</a> - 25</li> <li><a href="https://cuong.city/tags/algorithm">algorithm</a> - 23</li> <li><a href="https://cuong.city/tags/kubernetes">Kubernetes</a> - 23</li> <li><a href="https://cuong.city/tags/nginx">nginx</a> - 22</li> <li><a href="https://cuong.city/tags/css">css</a> - 21</li> <li><a href="https://cuong.city/tags/django">Django</a> - 21</li> <li><a href="https://cuong.city/tags/sql">sql</a> - 21</li> <li><a href="https://cuong.city/tags/thu%E1%BA%ADt%20to%C3%A1n">thuật toán</a> - 21</li> <li><a href="https://cuong.city/tags/php">php</a> - 20</li> <li><a href="https://cuong.city/tags/typescript">typescript</a> - 19</li> <li><a href="https://cuong.city/tags/android">Android</a> - 19</li> <li><a href="https://cuong.city/tags/vue.js">Vue.js</a> - 19</li> </ul> </div> </div> <div class="container footer"> ©2026 <a href="https://cuong.city">Thành phố Cuồng loạn</a> <script type="text/javascript"> var html = '<a href="' + '/contact-us' + '">'; html += 'Liên Hệ Chúng Tôi' + '</a>'; document.write(html) </script> </div><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5379b43de22ce639b661adac8c614286"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> document.querySelectorAll('code').forEach(code => { if (!code.closest('pre') && !code.hasAttribute('class') && code.textContent.includes('\n')) { code.classList.add('code-block'); } }); </script> </body> </html>