Hướng dẫn Sử dụng thẻ IFRAME

Thẻ iframe là gì?

Trước tiên cần nhấn mạnh  là thẻ iframe thường được dùng để thiết kế website, với kỳ thuật này, người dùng có thể nhúng hình ảnh, video hay nguyên cả website của người khác vào website của mình. Đây là 1 thủ thuật kinh doanh mà người ta hay dùng dể tạo ra những page tương tự và làm tăng tỷ lệ visit trên site.

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:CODE

Code:
<iframe src="index.html" width="100%" height="500"></iframe>

Đó 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 tôi 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

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

CODE 

Code:
<script language="JavaScript">
            function calcHeight()
            {    
                var dodai_trang = document.getElementById(‘Shacker’).contentWindow.document.body.scrollHeight;
                document.getElementById(‘Shacker’).height=dodai_trang;
            }
            </script>

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.

style=”display:inline-block;width:468px;height:60px” data-ad-client=”ca-pub-5785970934638279″ data-ad-slot=”1402228945″>

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.

CODE 

Code:
<iframe src="index.html" width="100%" id="Shacker" onLoad="calcHeight();"></iframe>

+ 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 ý.

CODE 

Code:
<iframe src="index.html" width="100%" id="Shacker" onLoad="calcHeight();" name="content" frameborder="0" scrolling="auto"></iframe>

em dùng thẻ iframe để chia trang thành 2 phần có chuyển sang trang khác thì cái menu nó vẫn nằm ở trên nhưng sao em làm nó lại ko full hết mà bị hạn chế như thế này ạ 


em dùng thế này
PHP Code:

<li><a href="........................." target='dar'>................................</a></li>
<iframe width=100% frameborder=0 name=”dar” class=’dar’ src=”dar.html”>
</iframe>
Thực tế đối với những website mới làm, và thường không chú tâm vào vấn đề nội dung mà chủ yếu đi sao chép của người khác thì sẽ lấy iframe chi nhanh. Tuy nhiên viêc sử dụng iframe có lợi và hại của riêng nó. Nên theo Harry, không nên lạm dụng.
Trong bài viết về lợi và hại của iframe thì minh cũng có 1 số mô tả trưc quan về nó. Trong thời điểm mình làm thì mọi thứ vẫn còn chạy tốt. nhưng nay xe lại thi hơn 2/3 trong số đó đã ra đi.
Tóm lại, là để làm digital marekting, bạn cần phải hiểu rõ là nội dung là quan trong nhất. Thử hình dung, trong 1 thế giới mà công cụ(hay vũ khí) là hoàn toàn giống nhau thì ai là người sử dụng nội dung và cung cấp nội dung tốt nhất cho người dùng thì người đó (giống như là người có võ công cao) sẽ chiến thắng. vậy thì nôi dung quan trọng như thế nào ?
Và cuối cùng là một lưu ý nhỏ nhưng cực kỳ quan trong là tuyệt đối tránh trường hợp trùng lặp nội dung nhé !!!

Be the first to comment

Leave a Reply