同一个html载入不同的页面,HTML不同页面中重用代码

需求

几个页面需要的头部和底部的内容往往是一样的，这就希望可以只写一段代码作为模板，然后再几个页面中都加载这这个模板。另外，如果需要修改，也只要修改模板就好，所有页面都同时都是新的样式了。

通过 JavaScript 来实现

能实现上面需求的方法还是不少的，这个比较简单一点，几乎不需要学习的额外知识，只通过2句基本的js语句就能实现。一句写页面html，一句加载js文件执行。暂时先用了这个方法。

第一步：制作html文件

把你的代码正常写成一个html文件，比如：

Title

欢迎光临，请

登录

或者

注册

• 购物车

• 我的订单
• 客户服务

第二步：转成js文件

就是把上面的每一行，都用 document.writeln(" ") 包起来。把你的html的内容都写在括号里。例外注意引号需要用 \" 转义。这个工作写个简单的脚本就能完成、不过也有现成的在线工具：http://tool.chinaz.com/Tools/Html_Js.aspx

最后你的js文件是这样的，这里我只需要body内的部分：

document.writeln("

");

document.writeln("

");

document.writeln(" ");

document.writeln(" 欢迎光临，请");

document.writeln(" 登录 ");

document.writeln(" 或者");

document.writeln(" 注册");

document.writeln(" ");

document.writeln("

• ");

document.writeln("

");

document.writeln(" 购物车");

document.writeln("

");

document.writeln("

我的订单");

document.writeln("

客户服务");

document.writeln("

");

document.writeln("

");

document.writeln("

");

第三步：到你的页面文件中加载这个js文件

把这句放在你的body的第一行，这样的的头部内容就有了：