html 如何引入一个公共的头部和底部

来源:互联网 发布:网络文学评论停刊 编辑:程序博客网 时间:2024/05/18 19:44

摘要: LINK[rel=import]其实有点类似于IFRAME,它引用的对象也是一个完整的文档,而不是文档片段,而且里面的SCRIPT也会执行,对跨域的资源访问同样有同源策略的限制

html 静态页面中引用外部页面没那么方便,主要方法有:

asp语言和PHP语言

首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,

标记前面)增加如下代码:

<!–  #include file=”head.asp”    –> 

如果是PHP文件,文件名改为 head.php即可

使用框架来实现

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>

以前人们常常使用静态frame框架来做首尾(一般不是iframe)。现在越来越少见了。主要因为设计网页相对比较困难,而且还增加了连接数,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录

使用.js脚本来实现

建立一个head.js的文件,找一个html转js的网站,然后把你头部的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文件过大会加重访问者的浏览器负担,影响访问速度

Behavior的download方式

最好能有一种方法,就像asp页面包含其他页面时那样,用一小段包含语句就可以实现,不要将需要包含的内容出现在本页面内,而是分割出去到另外一个自己的页面

​​​​​​​

原文链接

原创粉丝点击