Tự động fix chiều cao cho iframe trong Website

Tự động fix chiều cao cho iframe trong Website

Bạn sử dụng một iframe trong website để hiển thị nội dung (nội dung một website khác hoặc nội dung từ các file tài liệu, ....) nhưng bạn gặp một vấn đề về chiều cao của iframe. 

Tự động fix chiều cao cho iframe trong Website

 Nếu bạn đặt thuộc tính height = "auto" thì iframe không tự động co giãn chiều cao theo nội dung nó chứa mà chỉ hiển thị một phần rất nhỏ. Nếu bạn đặt height = "100%" thì cũng không tác dụng. Còn nếu bạn đặt height="n px" (n là một giá trị cố định bất kì) thì đôi lúc nội dung quá ngắn sẽ xuất hiện một khoảng trắng bên dưới rất xấu, hoặc khi nội dung quá dài thì iframe không hiển thị được hết nội dung. 

WEBXAULA sẽ hướng dẫn các bạn dùng Jquery để iframe tự động fix chiều cao theo nội dung bên trong nó.

Đầu tiên bạn cần khai báo Jquery:

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

 

Sau đó bạn sử dụng hàm javascript sau:

 

<script type="text/javascript">
        //function to fix height of iframe!
        var calcHeight = function () {
            var headerDimensions = $(#mainlivedemo).height();
            var selector = ($(.stretched).length > 0) ? #iframelive : #iframelive iframe;
            $(selector).height($(window).height() - headerDimensions);
        }
        $(document).ready(function () {
            calcHeight();
        });
        $(window).resize(function () {
            calcHeight();
        }).load(function () {
            calcHeight();
        });
              </script>

 

Bạn lưu ý ID "iframelive", iframe của bạn sẽ được đặt bên trong một DIV mang ID "iframelive":

 

<div id="iframelive">
    <iframe src="http://capquangfibervnn.blogspot.com/" style="width:100%; border:none;"></iframe>
</div>
 
Như vậy là bạn đã tạo được một iframe có chiều cao tự động fix với nội dung. Chúc các bạn thành công
Bạn thấy bài viết này như thế nào?: 
Average: 7.4 (5 votes)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Tool tăng tốc DNS, cải thiện 40% tốc độ duyệt web

Tool tăng tốc DNS, cải thiện 40% tốc độ duyệt web

Nhóm nghiên cứu thuộc trường đại học Northwestern University giới thiệu công cụ giúp giải quyết điểm yếu của các dịch vụ DNS công cộng.

Apple và Google đang "tôn thờ" điều gì?

Apple và Google đang "tôn thờ" điều gì?

Apple hay Google đều là những tên tuổi đẳng cấp thế giới. Bộ đôi đang nắm trong tay nhiều sản phẩm có thể thay đổi cuộc chơi, khối tài sản vài trăm tỷ USD

Facebook - iOS14.5 chính thức update toàn và điều gì mong đợi

Facebook - iOS14.5 chính thức update toàn và điều gì mong đợi

Vào ngày 26.04.2021 Apple chính thức ra mắt rộng rãi phiên bản iOS 14.5. kèm theo đó là những động thái rất ráo riết của các nền quảng cáo trong đó có Facebook

Công ty diệt chuột T&C

 

Diet con trung