JavaScript 實用技巧總彙整

1.表單運用跨視窗傳遞資料

藉由另一個視窗將資料傳回表單並自動關閉視窗

最想學的語言 查詢
<form name="form1" action="">
<input type="text" name="fruit">
<a href="#" onclick="javascript:open('js/s.html','','width=150,height=160,top=230,left=230')">option</a>
</form>

製作查詢頁面的下拉式選單(另存一個網頁s.html)

<script type="text/javascript">
function choice() {
sel = document.forms[0].elements[0];
opener.document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}
</script>
<form><select onChange="choice()">
<option>select</option>
<option>Korean</option>
<option>Japanese</option>
<option>French</option>
</select></form>
自行修改選擇的主題與項目


2.防止按鈕重複送出內容

我們使用一些程式例如送信.發表留言等..若程式內沒有禁止重複內容的功能,有些主機執行速度比較慢,遇到急性子的訪客可能會多按幾次送出按鈕,而造成重複發信或相同的留言內容,我們可以使用這個JS來防止這樣的情形.<script type="text/javascript">
<!-- //
function submitform() {
document.formname.button.disabled = true;
submitform = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert('In processing');
return false;
}
// -->
</script>
<form name="formname" action="xxx.cgi" method="post">
<button name="button" onClick="submitform()">SUBMIT</button>
</form>

3.實現內置框架高度自動調整

一般內置框架都是固定高度的,內容太長則會顯示捲軸,若將捲軸屬性設為 scrolling="no" ,不會出現捲軸但是過長的內容會被截斷,這教學利用javascript來實現動態調整,不顯示捲軸,可以依內容的長短自動調整高度,看起來就像網頁的一部分,而且這javascript可相容IE/NS/Firefox瀏覽器。

下載JS檔案 放置於網頁目錄下

<script type="text/javascript" src="iframe.js"></script> <iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="home.html" width="100%" height="300"></iframe> home.html 是內置框架中的網頁
請使用內部連結例如../home.html
用http://的連結方式無法正常顯示