丟掉 或是
吧!
有個朋友他的網頁左邊是選單,右側是選單點選後所顯示的網頁內容,有點像右圖這樣子。過去可能很多人都會用
來做這樣的事,左右各是一個 frame,然後把選單的 link target 設成右邊的 frame;或者是右邊弄成一個
,利用它來換不同連結的內容。但這位朋友最近不想用 frame 來做這些事,想看看能不能利用 JavaScript 和 CSS 來作到原本 frame 的效果,所以我就幫他一點小忙順便筆記下來,若以後有需要就可以用得上。
我的想法是,利用兩個 div
來放選單及內容,所以 HTML code 可能會寫成這樣:
[code lang=”xml”]
[/code]
然後當點選選單內容連結時,使用 Ajax 來 get 目的網頁,並且把取得的網頁內容放在 content 這個 div 之中。
首先,要先把 content 這個 div 的 overflow
屬性改一下,在 stylesheet 中加入:
[code lang=”css”]
#content {
overflow: auto;
}
[/code]
這樣當目的網頁內容超過 content 這個 div 邊界時才會出現 scroll bar。
接著,就是選單的內容:
[code lang=”xml”]
[/code]
我在 a
tag 中不設定連結的目的,反而是用一個 JavaScript function 來處理連結的目的地。所以要在 ...
間寫一點 JavaScript,而我這裡使用了 Prototype.js 這個 JavaScript library 來使用 Ajax:
[code lang=”javascript”]
[/code]
這樣一來,在 menu 裡使用 linkto
function 來作連結的網頁就會秀在 content 這個 div 裡了。
不過,用這個方法連結的網頁必須要放在同一個網域下(因為 XMLHttpRequest 的限制),要連結到外部網頁可能還是得靠 iframe
幫忙了。
Hello,
我是從廖大那邊看到你的 blog ,這篇借我引用一下吧~~~
謝謝你的賞識,請自取吧~(不要把作者拿掉就好 lol)
作者您好:
我想請問一下,連結的網頁a.html,b.html….的網頁
是不是不能用中文網頁呢.我用中文網頁有問題
但是英文網頁可以.
[quote comment=””]作者您好:
我想請問一下,連結的網頁a.html,b.html….的網頁
是不是不能用中文網頁呢.我用中文網頁有問題
但是英文網頁可以.[/quote]
我跟樓上的有同樣情況! 分頁的中文會顯示亂碼!
再請問作者,為何分頁a.html,b.html,chtml…裡面的javascript 及 flash 都不能顯示或正常運作! 請問有解決方法嗎? 這樣情況比iframe 就不好用了!
[quote comment=”18014″][quote comment=””]作者您好:
我想請問一下,連結的網頁a.html,b.html….的網頁
是不是不能用中文網頁呢.我用中文網頁有問題
但是英文網頁可以.[/quote]
我跟樓上的有同樣情況! 分頁的中文會顯示亂碼!
再請問作者,為何分頁a.html,b.html,chtml…裡面的javascript 及 flash 都不能顯示或正常運作! 請問有解決方法嗎? 這樣情況比iframe 就不好用了![/quote]
把JS拉到主要頁面
然後Ajax處理完之後立刻呼叫該JS檔案的啟動函數
回覆javascript 不能執行的問題,
可以改成
function linkto(url) {
new Ajax.Updater(‘content’, url, {method: ‘get’,evalScripts: true});
}
就可以了,但是FLASH不曉得怎麼解決。
中文亂碼的部分,主頁與分頁的編碼方式相同應該就沒問題了。
一開始html文件的編碼 最好就用utf-8 其他的用這方法應該都會有亂碼
文件本身的編碼 是在開檔一開始就已經設定了
這跟用meta這個不一樣 meta只是告訴瀏覽器判斷該用啥編碼
可是如果文件本身不是這種編碼 那還是不行
例如html本身是用ansi 即使你在meta裡面設定是utf-8 那還是會一樣是亂碼
比較好的方法 就是先把meta裡面的先改成utf-8
然後利用記事本開html 另存新檔的視窗裡 有一個編碼 改成utf-8再存檔就ok了
你好~我不懂javascript只會html跟css,日前做網頁需要搜尋到您的此篇文章,幫助我實現javascript+CSS做frame的效果,真是感謝~
但我又遇到一個問題:選單中的其中一個連結我還要加入”彈出式選單”,然後點選後再替換content內容.請問該如何實現呢?
我參考你的範例之後,有成功的做出來。
但遇到些問題, 由於被導入iframe的網頁,在不同的子資料夾內,而這些頁面,都需要抓取另外一個共用的images資料夾裏頭的圖片,
由於我們網站有搜尋引擎,所以這些被導入iframe的網頁,都會被以開新視窗的方式顯示,
問題就出現了,從iframe導入的頁面的圖片都顯示正常,但是獨立顯示頁面的時候就會出問題。
換另外一種方式說
就是這些頁面獨立顯示的時候圖片路徑必須抓 src=’../../images/a.jpg
被導入iframe的時候圖片路徑必須抓 src=’../images/a.jpg
我原本以為可以寫JSP來判斷所在網址來,是被導入iframe還是被開視窗顯示,因為被導入iframe的時候,網址會有個#,而獨立顯示則無,
但是後來發現被導入的iframe似乎不會執行任何jsp, 獨立開新視窗的時候是OK,可以正常判斷所在網址,可是被導入iframe的時候,就似乎無法執行任何程式?
還是我可以用什麼方式來判斷嗎? 我該在這些被導入的頁面,寫什麼樣的程式來判斷自己被導入iframe呢?
謝謝 感激不盡 希望你能夠看懂我問題!
不好意思,我前面寫得太多
總結一句話是 被導入iframe的頁面,有辦法用jsp來判斷自己在被導入iframe的狀態嗎?
謝謝。
我後來有加上 evalScripts: true 這段 敘述 可是仍然不會實行
也參考這篇去做了,http://www.javaeye.com/topic/24497
還是無法執行iframe 當中被導入的頁面裏頭所放的JS
程式
請問一下
是不是使用這個之後
無法導入別的css檔
——————————————
例如:
linkto(‘a.html’);
我在a.html中也有個css檔(aa.css)
但是按連結進入a.html之後,aa.css無法被載入
請問這無法更改了還是需要再修改哪邊的程式碼呢
——————————————
謝謝^^
版主您好,
我覺得這個方法很不錯,可是在firefox無法使用,因為我個人不會java script所以不知道是否修改哪一部份就可以讓firefox也可以秀出內容,謝謝!!
另外我有找到另外一個文章他也是可以做這個效果,在這裡提供給大家參考
http://dob.tnc.edu.tw/DiscussShow.php?g=96224&s=0&t=0
但我比較喜歡版大的方法,這樣可以讓內容較整潔,只是是否有哪邊語法要修改或增加好讓firefox也可使用