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

來源:互聯網
上載者:User
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上看到.

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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。