Hotline:
0936 292 319 (Ngọc)
Trang chủ
(current)
Khóa học
Học html cơ bản
Học HTML
Học css cơ bản
Học Javascript cơ bản
Học sql cơ bản
Objective-C Cơ Bản
jQuery Cơ Bản
HTML
Học php cơ bản
Học PHP qua các hàm thường dùng
Học Python cơ bản
Tự Học Thiết Kế Website với HTML và CSS
Tự Học Thiết Kế Website với HTML, CSS và JavaScript
Lập Trình Website Với PHP và MySQL
Câu hỏi
Bài viết
Liên hệ
Trang chủ
(current)
Khóa học
Học html cơ bản
Học HTML
Học css cơ bản
Học Javascript cơ bản
Học sql cơ bản
Objective-C Cơ Bản
jQuery Cơ Bản
HTML
Học php cơ bản
Học PHP qua các hàm thường dùng
Học Python cơ bản
Tự Học Thiết Kế Website với HTML và CSS
Tự Học Thiết Kế Website với HTML, CSS và JavaScript
Lập Trình Website Với PHP và MySQL
Câu hỏi
Bài viết
Liên hệ
Trang chủ
/
HTML
/
Thẻ
- HTML</a></li> </ul> </div> <div class="col-sm-8 all-product"> <div class="row"> <div class="col-sm-12 new-content box-shadow-3 mb-5"> <h1 class="entry-title">Thẻ <iframe> - HTML</h1> <div class="pso-header"> <i class="fa fa-angle-double-down border-radius-50"></i> </div> <div class="entry-content single-page"> <div class="section-content"> <h2>Frame Là Gì</h2> <p>Trong HTML, frame được dùng khi chúng ta cần nhúng một trang HTML khác vào trang hiện tại. Trang được nhúng sẽ được hiển thị trong một khung hình chữ nhật (hay còn gọi là frame).</p> <h2>Thẻ <code>iframe</code></h2> <p>Thẻ <code>iframe</code> (hay inline frame) được dùng để tạo frame:</p> <pre> <code><iframe src="http://www.hoclaptrinh.org"></iframe></code></pre> <h2>Thuộc Tính <code>src</code></h2> <p>Thuộc tính <code>src</code> của thẻ <code>iframe</code> chứa địa chỉ URL của trang frame được nhúng.</p> <p>Bạn có thể sử dụng đường dẫn tương đối cho thuộc tính <code>src</code> nếu như trang được nhúng có cùng tên miền, giao thức (ví dụ <code>http</code>), tên miền phụ (ví dụ <code>www</code>) và cổng (ví dụ <code>80</code>) với trang hiện tại.</p> <pre> <code><iframe src="chat.html"></iframe></code></pre> <h2>Thuộc Tính <code>width</code> và <code>height</code></h2> <p>Hai thuộc tính <code>width</code> <code>height</code> được dùng để quy định chiều cao và chiều rộng của khung frame:</p> <pre> <code><iframe src="chat.html" width="800px" height="600px"></iframe></code></pre> <p>Hai thuộc tính này sử dụng đơn vị đo mặc định là pixel (px) vì vậy bạn có thể bỏ ký hiệu đơn vị đo ở phía sau giá trị của hai thuộc tính này.</p> <pre> <code><iframe src="chat.html" width="800" height="600"></iframe></code></pre> <h2>Thuộc Tính <code>sandbox</code></h2> <p>Việc sử dụng iframe có thể ảnh hưởng tới trang hiện ví dụ như các đoạn mã JavaScript của trang iframe sẽ tác động tới trang hiện tại.</p> <p>Phiên bản HTML5 giới thiệu thuộc tính <code>sandbox</code> giúp tăng cường bảo mật cho trang hiện tại khi nhúng iframe từ trang web khác:</p> <pre> <code><iframe sandbox src="http://example.com/"></iframe></code></pre> <p>Việc thêm thuộc tính <code>sandbox</code> như ở trên sẽ giới hạn trang iframe không thể chạy mã JavaScript khi nhúng vào trang hiện tại, vô hiệu hoá việc gửi dữ liệu sử dụng form biểu mẫu, không cho phép mở cửa sổ popup...</p> <p>Để cho phép các đoạn mã của trang iframe chạy trang hiện tại, bạn cần thêm giá trị <code>allow-scripts</code> cho thuộc tính <code>sandbox</code>:</p> <pre> <code><iframe sandbox="allow-scripts" src="http://example.net/"></iframe></code></pre> <p>Để cho phép người dùng có thể gửi biểu mẫu trong trang iframe, bạn cần thêm giá trị <code>allow-forms</code> cho thuộc tính <code>sandbox</code>:</p> <pre> <code><iframe sandbox="allow-forms" src="http://example.net/"></iframe></code></pre> </div> </div> </div> </div> <div class="border-bottom mt-3 mb-4 pb-3"> <div class="row"> <div class="col-12 col-sm-6"> <a href="HTML/The-br" title="Thẻ br" class="btn btn-outline-primary"> <i class="fa fa-chevron-left"></i> Thẻ br </a> </div> <div class="col-12 col-sm-6 text-right"> <a title="Thẻ button" href="HTML/The-button" class="btn btn-outline-primary"> Thẻ button <i class="fa fa-chevron-right"></i> </a> </div> </div> </div> <div class="col-sm-12 comment"> <form action="sanpham/luucomment" method="POST" enctype="multipart/form-data"> <div class="bl"> <i class="fa fa-comments-o" aria-hidden="true"></i><p>10 bình luận</p></div> <textarea class="ndbinhluan" placeholder="Ý kiến của bạn về bài hát này..." name="comment"></textarea><br> <input type="hidden" name="idbaiviet" value="292"> <a href="account/login" class="binhluan">Đăng bình luận</a> </form> </div> <!--hết comment--> </div> <div class="col-sm-3 menuphai"> <div class="row mb-2"><div class="col-sm-12"> <div class="nav-button text-center"> <a href="account/login"><button type="button" class="btn btn-login">Đăng nhập</button></a> <a href="account/login"><button type="button" class="btn btn-login2">Đăng ký</button></a> </div> </div></div><div id="secondary" class="widget-area " role="complementary"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><span>Danh sách bài học</span></div> </aside> <ul class="list-unstyled tutorial-toc-list"> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-meta" title="Thẻ meta" class="text-dark text-decoration-none">Thẻ meta</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/Lop-va-ID" title="Lớp và ID" class="text-dark text-decoration-none">Lớp và ID</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-br" title="Thẻ br" class="text-dark text-decoration-none">Thẻ br</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-iframe" title="Thẻ iframe" class="text-dark text-decoration-none">Thẻ iframe</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-button" title="Thẻ button" class="text-dark text-decoration-none">Thẻ button</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-div" title="Thẻ div" class="text-dark text-decoration-none">Thẻ div</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/Tao-Trang-HTML" title="Tạo trang HTML" class="text-dark text-decoration-none">Tạo trang HTML</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/Bang-Table" title="Bảng - Table" class="text-dark text-decoration-none">Bảng - Table</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/Danh-Sach" title="Danh Sách" class="text-dark text-decoration-none">Danh Sách</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/Chen-CSS-vao-Trang-HTML" title="Chèn CSS vào Trang HTML" class="text-dark text-decoration-none">Chèn CSS vào Trang HTML</a> </li> <li class="py-1 px-1 "> <i class="fa fa-caret-right ml-1 mr-1"></i> <a href="https://www.codehub.com.vn/HTML/The-head" title="Thẻ head" class="text-dark text-decoration-none">Thẻ head</a> </li> </ul> </div> </div> </div> </div> </div> <script src="https://www.codehub.com.vn/js/common.js"></script> <div class="footer pt-3 pb-3"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 footer-1"> <p class="header-footer" style="text-align: left;"><strong>CodeHub</strong></p> <ul> <li style="text-align: left;"><strong>Địa chỉ:</strong> 206 Cộng Hòa, P.12, Q.Tân Bình, TPHCM</li> <li style="text-align: left;"><strong>Hotline:</strong><a href="tel:0936292319"> 0936 292 319</a></li> <li style="text-align: left;"><strong>Email:</strong> <a href="mailto:lienhe@codehub.vn">lienhe@codehub.vn</a></li> <li style="text-align: left;"><strong>Website:</strong> <a href="" target="_blank" rel="nofollow noopener">https://codehub.com.vn/</a></li> </ul> </div> <div class="col-sm-6 widget"> <div class="row"> <div class="col-sm-4"> <p class="header-footer">Liên kết</p> <ul class="sub-menu"> <li><a href="">Trang chủ</a></li> <li><a href="">Giới thiệu</a></li> <li><a href="">Tin tức nội bộ</a></li> <li><a href="">Tin ngành</a></li> <li><a href="lien-he">Liên hệ</a></li> </ul> </div> <div class="col-sm-4"> <p class="header-footer">Sản phẩm</p> <ul class="sub-menu"> <li><a href="">Học HTML cơ bản</a></li> <li><a href="https://www.codehub.com.vn/">Học CSS cơ bản</a></li> <li><a href="">Học PHP cơ bản</a></li> <li><a href="">Học Javascript cơ bản</a></li> </ul> </div> <div class="col-sm-4"> </div> </div> </div> </div> </div> </div> <div class="footer-2 text-center"> <span style="font-size: 16px;">Hotline: <a style="color: #fc8b00; font-size: 18px; font-weight:bold;" href="tel:0936292319"> 0936292319 (Ngọc)</a></span> </div> </div> <button onclick="topFunction()" id="myBtn" title="Go to top" style="display: block;"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></button> <script> // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> <script src="https://www.codehub.com.vn/js/lou.js"></script> <!-- Google Tag Manager (noscript) --> </body> </html>