Tự điều chỉnh độ cao cho thẻ IFRAME

Saokim999 · Đăng lúc 23-4-2008 11:31 PM

Mời bạn đăng ký để giao lưu kết bạn nhé <3

Bạn phải đăng nhập để xem được nội dung, nếu bạn chưa có tài khoản? hãy Đăng ký

x

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:
[html]<iframe src="index.html" width="100%" height="500"></iframe>[/html]
Đó 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.
b.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.
Mẫu
http://hacking.all4elva.com
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
a.align="giá trị" .:. bao gồm middle,left,right. Ví dụ align="middle"
b.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"
c.onLoad="Lệnh thực thi" .:. Lệnh sẽ chạy khi trang được tải.
d.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.silveryhat.com/"
e.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"
f.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%"
g.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)
h.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

<script language="JavaScript">
function calcHeight()
{
//SH Iframe Height Auto Resize v.01
//Used to resize the height of IFRAME to fit the content without any scrollbar.
//Coded by Silvery Hat Hacker 2006
var dodai_trang = document.getElementById('Shacker').contentWindow.document.body.scrollHeight;
document.getElementById('Shacker').height=dodai_trang;
}
</script>

Sao chép mã

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.

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

Sao chép mã

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

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

Sao chép mã

V - Một ví dụ mở rộng
Bạn copy đọan mã sau vào Notepad và Save dưới dạng HTML, cùng chung thư mục với hai tập tin index.html và index2.html

<html>
<head>
<script language="JavaScript">
function calcHeight()
{
//SH Iframe Height Auto Resize v.01
//Used to resize the height of IFRAME to fit the content without any scrollbar.
//Coded by Silvery Hat Hacker 2006
var dodai_trang = document.getElementById('Shacker').contentWindow.document.body.scrollHeight;
document.getElementById('Shacker').height=dodai_trang;
}
</script>
</head>
<body>
<a href="index.html" target="content">Google</a> <a href="index2.html" target="content">Yahoo Mail</a>
<iframe src="index.html" width="100%" id="Shacker" onLoad="calcHeight();" name="content" frameborder="0" scrolling="no"></iframe>
</body>
</html>

Sao chép mã

Mã nguồn tập tin index2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ImageShack® - Hosting</title>
<link rel="stylesheet" href="[URL]http://www.imageshack.us/img/style-def.css[/URL]" type="text/css">
<link rel="shortcut icon" href="[URL]http://www.imageshack.us/favicon.ico[/URL]" type="image/x-icon" />
<script language='javascript' src='http://127.0.0.1:1026/js.cgi?pca&r=4449'></script>
<script type="text/javascript">
function highlight(field) {
field.focus();
field.select();
}
var url = "[URL]http://imageshack.us/[/URL]";
var title = "ImageShack.us® - Image Hosting";
function favorites(){
if(document.all)
window.external.AddFavorite(url,title)
}
function disableme (what) {
what = document.getElementById(what);
what.disabled = true;
what.value="uploading...";
}
var buttonname = '"Browse..."';
function showoptions(what) {
var ext = what.value.substr(what.value.length - 3,3).toLowerCase();
switch (ext) {
case 'jpg':
case 'peg':
case 'png':
case 'gif':
case 'bmp':
case 'tif':
case 'iff':
document.getElementById('resizeoptions').style.display='';
document.getElementById('filetypeerror').style.display='none';
document.getElementById('butan').disabled=false;
document.getElementById('butan').value='host it!';
break;
case 'swf':
document.getElementById('resizeoptions').style.display='none';
document.getElementById('filetypeerror').style.display='none';
document.getElementById('butan').disabled=false;
document.getElementById('butan').value='host it!';
break;
case '':
document.getElementById('butan').disabled=true;
document.getElementById('butan').value=buttonname;
default:
document.getElementById('resizeoptions').style.display='none';
document.getElementById('filetypeerror').style.display='';
document.getElementById('butan').disabled=true;
document.getElementById('butan').value='bad file type';
break;
}
}
function toggleuploadmode(file) {
if (file) {
document.getElementById('upfile').style.display='block';
document.getElementById('upurl').style.display='none';
document.getElementById('upform').action='http://www.imageshack.us/index.php';
} else {
document.getElementById('upfile').style.display='none';
document.getElementById('upurl').style.display='block';
document.getElementById('upform').action='http://www.imageshack.us/transload.php';
}
}
function focusfield(fl) {
if (fl.value=="paste image url here") {
fl.value='';
fl.style.color='black';
}
}
-->
</script>
</head>
<body bgcolor="#F7F7F7">
<table width="760" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td><a href="<A href="http://www.imageshack.us/"><img">http://www.imageshack.us/"><img alt="ImageShack® Logo" src="[URL]http://imageshack.us/img/imageshack.png[/URL]" title="" /></a></td><td valign="bottom" align="left">
<b><a href="<A href="http://www.imageshack.us/">ImageShack®</a">http://www.imageshack.us/">ImageShack®</a>
| <a href="<A href="http://www.imageshack.us/slideshow/">Slideshows</a">http://www.imageshack.us/slideshow/">Slideshows</a> | <a href="<A href="http://reg.imageshack.us/content.php?page=features">Tools</a">http://reg.imageshack.us/content.php?page=features">Tools</a>
| <a href="<A href="http://reg.imageshack.us/content.php?page=faq">Common">http://reg.imageshack.us/content.php?page=faq">Common Questions</a>
| <a href="<A href="http://reg.imageshack.us/content.php?page=rules">Terms">http://reg.imageshack.us/content.php?page=rules">Terms of Service</a>
| <a href="<A href="http://reg.imageshack.us/content.php?page=register">My">http://reg.imageshack.us/content.php?page=register">My Images</a> | <a href="<A href="http://reg.imageshack.us/content.php?page=developer">Dev">http://reg.imageshack.us/content.php?page=developer">Dev Center</a>
</b>
</td></tr></table>
<script src="[URL]http://www.google-analytics.com/urchin.js[/URL]" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-277659-1";
urchinTracker();
</script>
<table cellpadding="5" width="760" border="1" bordercolor="#CCCCCC" class="table_decoration" align="center"><tr><td valign="top">
<script TYPE="text/javascript" SRC="<A href="http://content.yieldmanager.com/rmtag3.js"></SCRIPT">http://content.yieldmanager.com/rmtag3.js"></SCRIPT>
<script language="JavaScript">
var rm_host = "[URL]http://ad.yieldmanager.com[/URL]";
var rm_section_id = 62324;
var rm_iframe_tags = 1;
rmShowAd("300x250");
</SCRIPT>
</td><td valign="top"><p>ImageShack's mission is to provide an easy-to-use image hosting service.</p><p>Read the <a href="<A href="http://reg.imageshack.us/content.php?page=rules"><b>Terms">http://reg.imageshack.us/content.php?page=rules"><b>Terms of Service</b></a> and Bookmark <a rel="sidebar" title="ImageShack® - Sidebar" href="[URL]http://imageshack.us/index4.php[/URL]" onclick="window.external.AddFavorite(location.href,document.title);window.sidebar.addPanel(document.title,location.href,'');"><b>ImageShack's Sidebar</b></a>.</p><p><b><a href="<A href="http://reg.imageshack.us/content.php?page=faq">New">http://reg.imageshack.us/content.php?page=faq">New to ImageShack</a></b>? Start an <a href="<A href="http://imageshack.us/slideshow/"><b>Image">http://imageshack.us/slideshow/"><b>Image Slideshow</b></a>, or upload now:</p><br />
<form method="post" action="[URL]http://www.imageshack.us/[/URL]" enctype="multipart/form-data" onsubmit="disableme('butan')" id="upform">
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td><p style="font-size: 11px;">upload: <input type="radio" name="uploadtype" onclick="toggleuploadmode(true);" checked>
file <input type="radio" name="uploadtype" onclick="toggleuploadmode(false);"> url</p></td>
<td width="2"> </td>
<td><div id="upfile"><input type="file" name="fileupload" size="30" onchange="showoptions(this)" id="fileupload"></div>
<div id="upurl" style="display: none"><input type="text" id="fileupload" value="paste image url here" style="color: #888;"
onfocus="focusfield(this)" name="url" size="30"></div></td>
</tr></table>
<input type="hidden" name="MAX_FILE_SIZE" value="3145728">
<input type="hidden" name="refer" value="">
<input type="hidden" name="brand" value="">
<div id="resizeoptions">
<input type="checkbox" name="optimage" id="optimage" value="1" onclick="optsize.disabled=!this.checked"> resize image?
<select name="optsize" id="optsize">
<option value="100x100" >100x75 (avatar)</option>
<option value="150x150" >150x112 (thumbnail)</option>
<option value="320x320" selected>320x240 (for websites and email)</option>
<option value="640x640" >640x480 (for message boards)</option>
<option value="800x800" >800x600 (15-inch monitor)</option>
<option value="1024x1024" >1024x768 (17-inch monitor)</option>
<option value="1280x1280" >1280x1024 (19-inch monitor)</option>
<option value="1600x1600" >1600x1200 (21-inch monitor)</option>
<option value="resample" >optimize without resizing</option>
</select><br />
<input type="checkbox" name="rembar" value="1" > remove size/resolution bar from thumbnail?
</div>
<div id="filetypeerror" style="display: none"> <b style="color: red;">Please select only one of the supported file types:</b><br /></div>
<p>allowed: <b>jpg jpeg png gif bmp tif tiff swf</b> < <b>1.5 megabytes</b>.</p>
<input id="butan" style="width:135px" type="submit" value="host it!">    Install the free <b><a href="<A href="http://toolbar.imageshack.us/">ImageShack">http://toolbar.imageshack.us/">ImageShack Toolbar</a></b> now!</form></td></tr></table><div align="center" class="links">
href="<A href="http://reg.imageshack.us/content.php?page=aboutus">ImageShack">http://reg.imageshack.us/content.php?page=aboutus">ImageShack Corp</a>. All
rights reserved. <a href="<A href="http://reg.imageshack.us/content.php?page=linkto">Link">http://reg.imageshack.us/content.php?page=linkto">Link to ImageShack</a>
<br />
<a href="<A href="http://reg.imageshack.us/content.php?page=email&q=marketing">Marketing">http://reg.imageshack.us/content.php?page=email&q=marketing">Marketing Opportunities</a> |
<a href="<A href="http://reg.imageshack.us/content.php?page=email&q=abuse">Report">http://reg.imageshack.us/content.php?page=email&q=abuse">Report Abuse or Request Deletion</a> |
<a href="<A href="http://reg.imageshack.us/content.php?page=email&q=customer">Customer">http://reg.imageshack.us/content.php?page=email&q=customer">Customer Service</a>
<br />
<a href="<A href="http://reg.imageshack.us/content.php?page=email">Contact">http://reg.imageshack.us/content.php?page=email">Contact ImageShack</a>
</div>
<table width="385" cellspacing="0" cellpadding="3" border="0" class="table_decoration" align="center"><tr><td>
<p><a href="<A href="http://toolbar.imageshack.us/"><img">http://toolbar.imageshack.us/"><img src="[URL]http://imageshack.us/toolbar_img.png[/URL]" /></a></p>
<p>Install the free <b><a href="<A href="http://toolbar.imageshack.us/">ImageShack">http://toolbar.imageshack.us/">ImageShack Toolbar</a></b> now!</p>
</td></tr></table> <br />
</body>
</html>

Sao chép mã

Mã nguồn tập tin index.html

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title><style><!--
body,td,a,p,.h{font-family:arial,sans-serif;}
.h{font-size: 20px;}
.q{color:#0000cc;}
-->
</style>
<script>
<!--
function sf(){document.f.q.focus();}
function clk(url,oi,cad,ct,cd,sg){if(document.images){var e = window.encodeURIComponent ? encodeURIComponent : escape;var u="";var oi_param="";var cad_param="";if (url) u="&url="+e(url).replace(/\+/g,"%2B");if (oi) oi_param="&oi="+e(oi);if (cad) cad_param="&cad="+e(cad);new Image().src="/url?sa=T"+oi_param+cad_param+"&ct="+e(ct)+"&cd="+e(cd)+u+"&ei=ByevRLztCbmaaNfJzKMI"+sg;}return true;}
// -->
</script>
</head><body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onLoad=sf() topmargin=3 marginheight=3><center><table border=0 cellspacing=0 cellpadding=0 width=100%><tr><td align=right nowrap><font size=-1><a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den" onmousedown="return clk('/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den','promos','hppphnu:en_us','pro','1','')">Personalized Home</a> | <a href="<A href="https://www.google.com/accounts/Login?continue=http://www.google.com/&hl=en">Sign">https://www.google.com/accounts/Login?continue=http://www.google.com/&hl=en">Sign in</a></font></td></tr><tr height=4><td><img alt="" width=1 height=1></td></tr></table><img src="[URL]http://www.google.com/intl/en/images/logo.gif[/URL]" width=276 height=110 alt="Google"><br><br>
<form action=/search name=f><script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var ue=el.href;var qe=encodeURIComponent(document.f.q.value);if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;}
// -->
</script><table border=0 cellspacing=0 cellpadding=4><tr><td nowrap><font size=-1><b>Web</b>    <a id=1a class=q href="/imghp?hl=en&tab=wi" onClick="return qs(this);">Images</a>    <a id=2a class=q href="[URL]http://groups.google.com/grphp?hl=en&tab=wg[/URL]" onClick="return qs(this);">Groups</a>    <a id=4a class=q href="[URL]http://news.google.com/nwshp?hl=en&tab=wn[/URL]" onClick="return qs(this);">News</a>    <a id=5a class=q href="[URL]http://froogle.google.com/frghp?hl=en&tab=wf[/URL]" onClick="return qs(this);">Froogle</a>    <a id=7a class=q href="/maphp?hl=en&tab=wl" onClick="return qs(this);">Maps</a>    <b><a href="/intl/en/options/" class=q>more »</a></b></font></td></tr></table><table cellspacing=0 cellpadding=0><tr><td width=25%> </td><td align=center><input type=hidden name=hl value=en><input maxlength=2048 size=55 name=q value="" title="Google Search"><br><input type=submit value="Google Search" name=btnG><input type=submit value="I'm Feeling Lucky" name=btnI></td><td valign=top nowrap width=25%><font size=-2>  <a href=/advanced_search?hl=en>Advanced Search</a><br>  <a href=/preferences?hl=en>Preferences</a><br>  <a href=/language_tools?hl=en>Language Tools</a></font></td></tr></table></form><br><font size=-1>Share pictures with <a href=http://picasa.google.com/pack.html onmousedown="return clk(this.href,'promos','hppwebwinxp:en_us','pro','1','')">Google's photo organizer</a>, part of Google Pack</font><br><br><br><font size=-1><a href="/intl/en/ads/">Advertising Programs</a> - <a href=/services/>Business Solutions</a> - <a href=/intl/en/about.html>About Google</a><span id=hp style="behavior:url(#default#homepage)"></span>
<script>
//<!--
if (!hp.isHomePage('http://www.google.com/')) {document.write("<p><a href="/mgyhp.html" onClick="style.behavior='url(#default#homepage)';isHomePage ('http://www.google.com/');">Make Google Your Homepage!</a>");}
//-->

Sao chép mã

Tài khoản		Ghi nhớ?	Quên mật khẩu
Mật khẩu			Đăng ký

Tự điều chỉnh độ cao cho thẻ IFRAME

Mời bạn đăng ký để giao lưu kết bạn nhé <3

Thông báo /1