JavaScript讓網頁自動穿上外套的方法技巧

javascript|技巧|網頁

　　進行網頁設計時，許多網頁都需要相同的邊框圖案和導航條，FrontPage給我們提供了共用邊框方便設計，但是，這樣也不太方便，畢竟每個網頁都添加了相同的內容，無形中網頁增大了，當然，對於動態網頁，這不是問題，但是，如果是靜態呢?

　　進行網頁設計時，許多網頁都需要相同的邊框圖案和導航條，FrontPage給我們提供了共用邊框方便設計，但是，這樣也不太方便，畢竟每個網頁都添加了相同的內容，無形中網頁增大了，當然，對於動態網頁，這不是問題，但是，如果是靜態呢?

　　怎樣可以克服這個缺點，通過架構可以實現這些的，只是，架構又引來了另一個麻煩，就是如果直接開啟架構內部網頁，脫去了華麗的外套，是不是顯得很單調，這裡我們找一種好的方法，讓脫去外套的網頁自動穿上外套，你想到了嗎?如果你對這個議題不感興趣，你可以走開了，下面我們詳細討論。

　　在框架頁中，通常使用src參數指定架構內的網頁地址，我們要做的就是，當直接開啟這個地址時，讓它自動監測然後再穿上外套，當然，首先要在網頁內添加檢測代碼，如下：

<script>
if(top.location==self.location)
{
  top.location="index.htm?"+self.location;
}
</script>

　　就這麼簡單，注意，index.htm是外套網頁地址，接下來要做的就是，怎樣讓外套網頁自動添加這部分內容，我們要在外套網頁中解析網頁地址，找到參數，然後將架構src參數指向該參數就行了，代碼如下：

<script>
document.write('<iframe id="mid" name="mid" width="100%" height="100%" frameborder="0" scrolling="auto"')
var n=self.location.href.indexOf("?")//查看是否包含參數
if(n>0)//存在參數
{
//指向參數
document.write(" src="+self.location.href.substr(n+1))
}
document.write('></iframe>')
</script>

　　這裡使用iframe架構，具體應用可在我的網站ggg82.126.com上看到.

　　你可以點這裡看一下效果，如有不懂的地方，也可以聯絡我。有什麼好的看法，歡迎與我討論.