html 如何引入一个公共的头部和底部(不使用模版引擎如jsp、freemarker、velocity的方式)

来源：互联网发布：竞价调价软件编辑：程序博客网时间：2024/06/06 17:19

百度链接显示异常点此进入正常页面:http://blog.csdn.net/wabiaozia/article/details/75092623

我们常用的模版引擎如jsp、freemarker、velocity是支持页面引入的,但如果想在html中引入月公共的js,css等该怎么做呢？

常用的方法有:使用框架来实现,使用.js脚本来实现,HTML5 中的 <embed> 标签等等。我这里介绍一种使用.js脚本来实现,参考了如下博客:

博客:https://yq.aliyun.com/articles/100662?t=t1

使用.js脚本来实现

建立一个head.js的文件，找一个html转js的网站(http://tool.chinaz.com/tools/html_js.aspx)，然后把你头部的html代码转化成js代码，并放在head.js文件里面。然后在需要调用head文件代码的地方添加

<script language="javascript" type="text/javascript" src="js/head.js"></script>

这个地方src="js/head.js"的路径是你head.js文件的路径

html转换为JS:

document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");document.writeln("<head>");document.writeln("<style>");document.writeln("</style>");document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");document.writeln("<title></title>");document.writeln(" <link href=\'head.css\'  rel=\"stylesheet\" type=\"text/css\" />");document.writeln("</head>");document.writeln("<body >");document.writeln(" <div class=\'miaov_head\'>");document.writeln("    <ul>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");document.writeln("    </ul>");document.writeln("</div>");document.writeln(" ");document.writeln("</body>");document.writeln("</html>");document.writeln("");

以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可

这种方式的优点是方便，便于修改。缺点是由于搜索引擎读不懂javascript文件，头部文件和尾部文件搜索引擎无法收录，而且js文件过大会加重访问者的浏览器负担，影响访问速度

阅读全文

0 0