多个html怎么导入相同的头部导航

最新推荐文章于 2023-10-13 14:06:13 发布

weixin_34146410

最新推荐文章于 2023-10-13 14:06:13 发布

阅读量470

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/renyunbo/p/6053205.html

版权

1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe> 
    <div>页面内容</div> 
    <iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe> 
</div> 
</body> 
</html> 
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <script type="text/javascript" href="head.js"></script> 
    <div>页面内容</div> 
    <script type="text/javascript" href="foot.js"></script> 
</div> 
</body> 
</html> 
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--#  include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <!--#include file="head.html" --> 
    <div>页面内容</div> 
    <!--#include file="foot.html" --> 
</div> 
</body> 
</html>

转载于:https://www.cnblogs.com/renyunbo/p/6053205.html

weixin_34146410

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多个html怎么导入相同的头部导航

1. iframe 包含法。页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。简单代码结构示例：<html> <head> <title>页面</title> <style type="text/css"&gt...
复制链接

扫一扫