KIẾN THỨC LẬP TRÌNH

.NET, C++...
Sharepoint
Thiết kế web
Marketing Online
...

Về chúng tôi

THANHNAM SOFTWARE bao gồm đội ngũ các chuyên gia trong lĩnh vực công nghệ thông tin.
Làm việc chuyên nghiệp, có nhiều kinh nghiệm triển khai các dự án trong và ngoài nước:
Tư vấn-triển khai giải pháp EOFFICE, ERP
Xây dựng phần mềm
Thiết kế wesite
Marketing online...

Chúng tôi luôn vì sự hài lòng của khách hàng, mang tới cho quý khách hàng những dịch vụ và sẩn phẩm chất lượng nhất!
 

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

 
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.
 

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ÀI VIẾT LIÊN QUAN