close

同時更新框架





艾爾弗烈德現在要變個小把戲，點選下方按鈕後，三個框格的內容會同時更新。







再點選下方按鈕後，三個框格的內容會同時換回來。







可別和我爭論，明明有先後順序，沒有同時更新啊！

我指的是你只要點選一次按鈕就可以更新數個框格的內容。







當然，我可不會真的變魔術，這只是唬唬人的！兩個按鈕是由爪哇語法(JavaScript)控制的，如果你還沒把三個框格換回來，就去點選一下回復按鈕吧！然後注意一下三個框格內的說明文字：frames[1]、frames[2]和frames[3]，馬上就會用到哦！







框架原始碼



我們先來看看這篇網頁的原始碼，我使用了四個框格：




















如果這段語法對你像是甲骨文，那你應該回到 基本框架旗標 多下點功夫。言歸正傳，我為四個框格分別取名為A、B、C、D，以便於日後我需要使用連結旗標的TARGET屬性來控制框格內容的變換。



當然這時候你已經知道NAME和TARGET屬性了，你也會為框格取名，可是你八成不知道，在你為框格取名之前，瀏覽程式已經把它們編號了。







框格編號



瀏覽程式會依框格出現在原始碼中的順序為它們編號。



但是



它是由0開始的，所以三個框格由左向右為：frames[1]、frames[2]和frames[3]。那麼frames[0]在那兒呢？你回頭看一下原始碼，應該不難猜出：





這是frames[0]





這是frames[1]

這是frames[2]

這是frames[3]









注意：frames[--]的英文是框架的複數(加上s)，在爪哇語法中如果拼成frame[--]就錯了。







爪哇語法



以下是將三個框格內容更換為C/NET連結圖案的原始碼：






parent.frames[2].location='FrameChangeB2.html';

parent.frames[3].location='FrameChangeC2.html';"

type=button value="同時更新三個框架">









原始碼分析：



如果你不太熟悉表單旗標(FORM)爪哇語法(JavaScript)，沒有關係，請容我另文介紹。我先介紹我們在這兒所用到的HTML及JavaScript：



FORM　表單的開始旗標。

INPUT TYPE="button"　宣告將使用按鈕(Button)。

VALUE=　宣告按鈕上的文字。

onClick=　宣告當點選按鈕時要求瀏覽程式所要完成的工作。注意：除了字母C以外，其它字母皆為小寫。

parent.frames[1].location='FrameChangeA2.html';　這兒就是爪哇語法(JavaScript)了：

"Parent"　在英文中是指父母親，在這兒指的是母框(整個視窗)。

"frames[1]"　依指令動作而將變動(更新內容)的框格。

"location=______"　變動(更新內容)網頁的連結地址，在這兒是FrameChangeA2.html。

注意：不可遺漏行末的分號(;)。

/FORM　表單的結束旗標。





再看看將三個框格內容換回來的原始碼：






parent.frames[2].location='FrameChangeB1.html';

parent.frames[3].location='FrameChangeC1.html';"

type=button value="嗯！可以換回來了">









明白了嗎？隨你高興，你可以同時更新許多框格內容。你只需使用 onClick= 指令，為需要更新的每一個框格加上 parent.frames[#].location='______'; 即可。



此外，你注意到沒有？ onClick= 指令後面接的是雙引號(")，parent.frames[#].location='______'; 指令後面接的是單引號(')，不能搞錯哦！







結語



你當然可以使用許多框格，然後點選按鈕一次就更新全部。但有一件事請常記在心，每更新一個框格就需要重新下載一篇網頁，更新十個框格就需要重新下載十篇網頁，更新愈多框格則下載速度愈慢。如果真的是需要同時更新許多框格，其內容愈簡潔愈好(少圖少字)，以縮短下載時間。




資料來源:http://www.geocities.com/alfredcave/FrameChangeMain.html


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 killworm737 的頭像
    killworm737

    紀錄些小事情

    killworm737 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄