丟掉 <frameset> 或是 <iframe> 吧！

網頁 layout有個朋友他的網頁左邊是選單，右側是選單點選後所顯示的網頁內容，有點像右圖這樣子。過去可能很多人都會用 <frameset> 來做這樣的事，左右各是一個 frame，然後把選單的 link target 設成右邊的 frame；或者是右邊弄成一個 <iframe>，利用它來換不同連結的內容。但這位朋友最近不想用 frame 來做這些事，想看看能不能利用 JavaScript 和 CSS 來作到原本 frame 的效果，所以我就幫他一點小忙順便筆記下來，若以後有需要就可以用得上。

我的想法是，利用兩個 div 來放選單及內容，所以 HTML code 可能會寫成這樣：

<div id="menu">
  ...
</div>
<div id="content"></div>

然後當點選選單內容連結時，使用 Ajax 來 get 目的網頁，並且把取得的網頁內容放在 content 這個 div 之中。

首先，要先把 content 這個 div 的 overflow 屬性改一下，在 stylesheet 中加入：

#content {
  overflow: auto;
}

這樣當目的網頁內容超過 content 這個 div 邊界時才會出現 scroll bar。

接著，就是選單的內容：

<div id="menu">
  <ul>
    <li><a href="#" onclick="linkto('a.html');">Link To A</a></li>
    <li><a href="#" onclick="linkto('b.html');">Link To B</a></li>
    <li><a href="#" onclick="linkto('c.html');">Link To C</a></li>
  </ul>
</div>

我在 a tag 中不設定連結的目的，反而是用一個 JavaScript function 來處理連結的目的地。所以要在 <head> ... </head> 間寫一點 JavaScript，而我這裡使用了 Prototype.js 這個 JavaScript library 來使用 Ajax：

<!-- using Prototype.js -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
  function linkto(url) {
    new Ajax.Updater('content', url, {method: 'get'});
  }
</script>

這樣一來，在 menu 裡使用 linkto function 來作連結的網頁就會秀在 content 這個 div 裡了。

不過，用這個方法連結的網頁必須要放在同一個網域下（因為 XMLHttpRequest 的限制），要連結到外部網頁可能還是得靠 iframe 幫忙了。

 

歷史上的今天