D.A.C.S.I.T - Web » Iframe http://thietkeweb.dacsit.com Thiết kế web, Ảnh đẹp, Wordpress, Joomla, Template, Theme, Thủ thuật ... Tue, 20 Apr 2010 16:36:40 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Tự điều chỉnh độ cao cho thẻ IFRAME http://thietkeweb.dacsit.com/2009/11/tu-dieu-chinh-do-cao-cho-the-iframe.html http://thietkeweb.dacsit.com/2009/11/tu-dieu-chinh-do-cao-cho-the-iframe.html#comments Fri, 06 Nov 2009 16:08:51 +0000 admin http://thietkeweb.dacsit.com/?p=34 I – Cái nhìn chung

Có bao giờ bạn dùng thẻ IFRAME để nhúng một trang khác vào trang hiện tại của mình chưa? Chắc chắn bạn sẽ dùng đọan mã tương tự như sau:

[QUOTE]<iframe src=”index.html” width=”100%” height=”500″></iframe>[/QUOTE]

Đó là phần mã nguồn, thế trong trình duyệt bạn sẽ trông thấy trang này được xử lý ra sao. Phần chiều cao của trang nhúng trong thẻ IFRAME thường không đủ chiều cao của trang và thanh cuộn sẽ xuất hiện, nói nôm na là trang web nằm trong thẻ IFRAME có thể quá thấp, hoặc quá cao so với trang chính.

Vậy điều kiện đặt ra sẽ là làm sao cho trang nằm trong thẻ IFRAME tự động thay đổi chiều cao Height của chính nó sao cho thanh cuộn không xuất hiện bên trong và trải vừa với cả trang.
Trước đây có nhiều bạn hỏi Shacker làm sao, nhưng lúc đó chưa có thời gian để hướng dẫn, nên bây giờ trong bài viết này Shacker sẽ chỉ dẫn lại tường bước kỹ càng để bạn có thể tự áp dụng phương thức này vào trang web của bạn.

II – Lợi ích dùng thẻ IFRAME + SH IFRAME HEIGHT AUTO RESIZE

a.Thẻ IFRAME

+ Cho phép lồng trang khác vào website
+ Có thể kết hợp nâng cao để khi click lên liên kết, cả trang sẽ không thay đổi và chỉ nội dung ở trang IFRAME chính thay đổi
+ Tiết kiệm bandwidth của máy chủ, tăng tốc độ duyệt trang tối đa cho người tham quan và nâng cao tính chuyên nghiệp cho trang web
+ Kỹ thuật AJAX ngày càng được sử dụng nhiều vào các trang web, lợi ích của nó mà mọi người mong đợi là một ứng dụng web có tính tương tác cao và tải nhanh chóng. Từng bước làm quen với nó bạn cần những bài học cơ bản nhất, và việc sử dụng tính năng của thẻ IFRAME cho bạn cái nhìn chung bao quát trước khi tìm hiểu AJAX họat động như thế nào và làm sao để tích hợp được nó vào website.

b.Đọan mã SH IFRAME HEIGHT AUTO RESIZE

+ Thay đổi kích thước độ cao thẻ IFRAME để trải dài tòan bộ trang và không xuất hiện thanh cuộn làm mất thẩm mỹ trang web

III – Một số thuộc tính cần biết của thẻ IFRAME

align=”giá trị” .:. bao gồm middle,left,right. Ví dụ align=”middle”

id=”tên bất kỳ” .:. gán giá trị ID nhận dạng cho thẻ IFRAME, dùng để nhận lệnh khi một đối tượng khác gọi đến. Ví dụ id=”Shacker”
onLoad=”Lệnh thực thi” .:. Lệnh sẽ chạy khi trang được tải.

src=”link liên kết một trang khác” .:. Nhúng một website, một trang web khác vào trang hiện tại. Ví dụ src=”http://www.thuvienit.org”

name=”tên bất kỳ” .:. gán giá tên cho thẻ IFRAME, dùng khi một liên kết được nhấn lên và tải vào thẻ IFRAME mạng tên này. Ví dụ name=”noidung”

width=”giá trị số” .:. Điền vào số, hoặc phần trăm để chỉnh độ dài của trang trong thẻ IFRAME. Ví dụ width=”100%”

frameborder=”0″ .:. Hiện đường viền bao bọc trang hoặc không. Giá trị thường dùng là 1 (yes) hoặc 0 (no)

scrolling=”auto” .:. Hiện thanh cuộn của IFRAME hoặc không. Bao gồm 3 giá trị yes/no/auto

IV – Mã SH IFRAME HEIGHT AUTO RESIZE

Chèn đọan mã sau vào sau thẻ <head> trong trang web của bạn

[QUOTE]<script language=”JavaScript”>
function calcHeight()
{
var dodai_trang = document.getElementById(’Shacker’).contentWindow.document.body.scrollHeight;
document.getElementById(’Shacker’).height=dodai_trang;
}
</script>[/QUOTE]

Bạn có để ý thấy chữ Shacker trong đọan mã trên?
+ Ý nghĩa của nó là cho giá trị dodai_trang là độ dài của cả trang được nhúng vào thẻ IFRAME có ID được gán là Shacker (xem lại phần III – b )
+ Ở dòng thứ 2, đọan script sẽ gọi thẻ IFRAME có ID là Shacker lần nữa, sau đó ra lệnh cho độ dài của nó thay đổi khớp với độ dài của trang được nhúng vào. (Vậy là giải quyết được yêu cầu ở phần I – cool.gif
Tuy nhưng làm sao để nó tự động thực hiện điều đó mỗi khi trang nhúng thay đổi? Nếu bạn chú ý ở phần III – c , bạn sẽ có một khái niệm cho câu trả lời của mình.

IV – Điều chỉnh thẻ IFRAME

Ở thẻ IFRAME trong bước một, bạn sẽ thêm vào 2 giá trị quan trọng, và xóa đi thuộc tính height, vì ta không cần nó nữa.

[QUOTE]<iframe src=”index.html” width=”100%” id=”Shacker” onLoad=”calcHeight();”></iframe>[/QUOTE]

+ Thuộc tính ID được gán để đọan mã SH Iframe Height Auto Resize gọi khi cần đến, thẻ onLoad sẽ gọi lại chức năng calcHeight() trong đọan script khi trang nhúng trong thẻ IFRAME thay đổi, khi đó độ dài thẻ IFRAME sẽ tự thay đổi cho khớp
+ Bạn có thể thêm một số thuộc tính khác vào thẻ IFRAME tùy ý.

[QUOTE]<iframe src=”index.html” width=”100%” id=”Shacker” onLoad=”calcHeight();” name=”content” frameborder=”0″ scrolling=”auto”></iframe>[/QUOTE]
]]> http://thietkeweb.dacsit.com/2009/11/tu-dieu-chinh-do-cao-cho-the-iframe.html/feed 0