html 如何引入一个公共的头部和底部-阿里云开发者社区

开发者社区> webmirror> 正文

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

简介: 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页面包含其他页面时那样,用一小段包含语句就可以实现,不要将需要包含的内容出现在本页面内,而是分割出去到另外一个自己的页面

<span ><IE:Download STYLE="behavior:url(#default#download)" />
<script>
    function onDownloadDone(downData){
        showImport1.innerHTML=downData
    }
    oDownload1.startDownload('top.htm',onDownloadDone)
</script>

注:包含的页面为 top.htm 只要把需要包含的页面改掉就可以了!其中id=showimport 不能改为其他,这种写法为一次包含一个文件

通过<object>实现

<object type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

HTML中执行include file

使用ssi技术页面生成shtml文件,只用在头部文件位置加入:

SSI(Server Side Include),通常称为"服务器端嵌入"或"服务器端包含",是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中,可以通过注释行调用的命令或指针,SSI具有 强大的功能,只要使用一条简单的SSI命令就可以实现整个网站的内容更新,时间和日期的动态显示,以及执行shell和CGI脚本程序等复杂的功能

<!--#include file="library/common_header.html" -->

使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的, 不会加重访问者的浏览器负担

HTML5 中的 <embed> 标签

<embed type="text/html" src="footer.html" />

ajax动态填充

node代理

1:使用ssi技术页面生成shtml文件,只用在头部文件位置加入,然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的,不会加重访问者的浏览器负担

本地合并

即将HTML硬拆成头、尾、内容三个部分的文件,在预览或者发布之前用脚本手工合并,没有后台的时候使用效果不错

ajax动态拉取填充

web服务器(比如IIS)中设定包含

后台模板引擎处理(字符串拼接)

用图片、flash等外部资源做---不推荐,比较麻烦

angular js里的的使用

使用fis。有html嵌入功能

<link rel="import" href="demo.html?__inline">

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

和IFRAME不同的是,它和父文档的关系更密切。它自身确实是一个文档,可以通过link元素上的import属性访问,但在其内部的代码中,如果访问document则等同于访问父文档。这是很奇怪的设定,虽然内部的元素与父文档不在一个DOM树上(父文档上querySelector无法找到内部的元素),但他们却共用一个document对象,甚至共用一个全局环境。这意味着STYLE或SCRIPT之类的标签所执行的结果会影响到容器

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10053 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26780 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13866 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9156 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7359 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22375 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4497 0
+关注
webmirror
Good good study, day day up
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载