[操作疑難] 點樣用 html5 整個共用既 header 俾所有 webpages?

例如我有以下 pages:
header.html
a.html
b.html

a.html 同 b.html 都要 share 同一個 header.html, 個 header.html 其實係個 menu bar,
但更重要既係, 個 header (入面個 menu bar) 可以對 a.html 同 b.html 既 content 作出改變,即係如果我 click a.html 入面個 header menu bar 條 link, 係可以將 a.html 變成 b.html,

點解要咁?因為如果我有幾百個 webpage, content 唔同但 header menu bar 一樣, 萬一我要修改 menu bar, 唔通要幾百個 webpage 都改哂咩 !

請師兄們指教, 我上網搵過, 但都係唔得, 又或者只係 load 到個 heading, 但 click 個 heading時, 只係個 heading 改變, 個 webpage 都無任何改變!

通常呢D係server side做
純html好難做到以上效果, 除非用frame, 不過而家冇人會用
一係就ajax

TOP

回覆 1# koii123


    old technology.... use js to gen the html header code

TOP

通常呢D係server side做
純html好難做到以上效果, 除非用frame, 不過而家冇人會用
一係就ajax ...
KinChungE 發表於 2015-7-24 03:56 PM



thanks,
    即係 shtml ?

TOP

回覆  koii123


    old technology.... use js to gen the html header code
gamezz 發表於 2015-7-24 04:26 PM



thanks,
    即係點樣?

TOP

thanks,
    即係 shtml ?
koii123 發表於 2015-7-24 16:50


no
jsp, php, aspx, node.js.....

TOP

回覆 5# koii123
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="header.js"></script>
  4. <body>

  5. <script>
  6. build_header();
  7. </script>

  8. <p>body text</p>

  9. </body>
  10. </html>
複製代碼
header.js
  1. function build_header(){
  2. document.write('<div class="header">Menu text ...</div>');
  3. }
複製代碼

TOP

no
jsp, php, aspx, node.js.....
KinChungE 發表於 2015-7-24 04:51 PM


試左, 用 shtml 係 work!

a.shtml 唔要 <header>, 直接加入:
  1.    <div data-role="page content">
  2.                 <!--#include file="header.html" -->
  3.               </div>  
複製代碼


header.html 先 load 哂所需 scripts, 再加入 header:
  1. <header id="header" data-role="header">
  2. Your menu here!...
  3. </header>
複製代碼


要 upload 去server 先睇到成個效果 (dreamweaver 都可以 preview 到),
但要將 a.html 改為 a.shtml, 否則唔 work!
但有 D 缺點, 我個 webpage 有D 地方唔正常!

有咩好 D 既方法?

TOP

試左, 用 shtml 係 work!

a.shtml 唔要 , 直接加入:


header.html 先 load 哂所需 scripts, 再加入 hea ...
koii123 發表於 2015-7-24 17:03


依個技術叫SSI,不過依家通常都係用Template Engine做。

TOP

回覆  koii123 header.js
gamezz 發表於 2015-7-24 04:55 PM



    Thanks!
呢個 work!
但 javascript 唔俾分行,
我可以用咩 edit?

TOP