HTML不同頁面中重用代碼
阿新 • • 發佈：2018-02-24
javascript需求
幾個頁面需要的頭部和底部的內容往往是一樣的，這就希望可以只寫一段代碼作為模板，然後再幾個頁面中都加載這這個模板。另外，如果需要修改，也只要修改模板就好，所有頁面都同時都是新的樣式了。
通過 JavaScript 來實現
能實現上面需求的方法還是不少的，這個比較簡單一點，幾乎不需要學習的額外知識，只通過2句基本的js語句就能實現。一句寫頁面html，一句加載js文件執行。暫時先用了這個方法。
第一步：制作html文件
把你的代碼正常寫成一個html文件，比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background: black;height: 36px;line-height: 36px;color: #9f9f9f;"> <div style="width: 1000px;margin: auto;"> <span> 歡迎光臨，請 <a href="login.html" style="text-decoration: none;color: red;">登錄 </a> 或者 <a href="regist.html" style="text-decoration: none;color: red;">註冊</a> </span> <ul style="float: right;list-style-type: none;margin: 0"> <li style="float: left;margin: 0 5px;padding: 0 10px;"> <a href="cart.html" style="text-decoration: none;color: red;">購物車</a> </li> <li style="float: left;margin: 0 5px;padding: 0 10px;">我的訂單</li> <li style="float: left;margin: 0 5px;padding: 0 10px;">客戶服務</li> </ul> </div> </div> </body> </html>
第二步：轉成js文件
就是把上面的每一行，都用 document.writeln(" ") 包起來。把你的html的內容都寫在括號裏。例外註意引號需要用 \" 轉義。這個工作寫個簡單的腳本就能完成、不過也有現成的在線工具：http://tool.chinaz.com/Tools/Html_Js.aspx
最後你的js文件是這樣的，這裏我只需要body內的部分：
document.writeln("<div style=\‘background: black;height: 36px;line-height: 36px;color: #9f9f9f;\‘>"); document.writeln(" <div style=\‘width: 1000px;margin: auto;\‘>"); document.writeln(" <span>"); document.writeln(" 歡迎光臨，請"); document.writeln(" <a href=\‘login.html\‘ style=\‘text-decoration: none;color: red;\‘>登錄 </a>"); document.writeln(" 或者"); document.writeln(" <a href=\‘regist.html\‘ style=\‘text-decoration: none;color: red;\‘>註冊</a>"); document.writeln(" </span>"); document.writeln(" <ul style=\‘float: right;list-style-type: none;margin: 0\‘>"); document.writeln(" <li style=\‘float: left;margin: 0 5px;padding: 0 10px;\‘>"); document.writeln(" <a href=\‘cart.html\‘ style=\‘text-decoration: none;color: red;\‘>購物車</a>"); document.writeln(" </li>"); document.writeln(" <li style=\‘float: left;margin: 0 5px;padding: 0 10px;\‘>我的訂單</li>"); document.writeln(" <li style=\‘float: left;margin: 0 5px;padding: 0 10px;\‘>客戶服務</li>"); document.writeln(" </ul>"); document.writeln(" </div>"); document.writeln("</div>");
第三步：到你的頁面文件中加載這個js文件
把這句放在你的body的第一行，這樣的的頭部內容就有了：
<script src="page/pg-top.js"></script>
HTML不同頁面中重用代碼