html中引入调用另一个公用html模板文件的方法

最近写网页的时候,发现页面都是用的同一个header头部、aside侧边栏和footer页脚,那么为什么不把这些写成一个模板文件,在页面中直接引入呢?这样还方便后期的修改维护。

admin1.png html中引入调用另一个公用html模板文件的方法 经验总结

查了一下资料,发现html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧:
其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。

一、需要借助 jquery div+$("#page1").load("b.html") 。

参考代码:

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

二、iframe 会生成一个边框,需要重新设置一下样式,相当于在页面内嵌入了一个页面。

参考代码:

<head>
</head>
<body>
   <div id="page1">
        <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
   <div id="page2">
        <iframe align="center" width="100%" height="170" src="page/Page_2.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
</body>

三、object引入 同样会生成一个边框,需要重新设置一下样式。

参考代码:

<head>
    <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
    </object>
</head>

四、import引入 这个我并没有试验成功,可能是我打开方式不对。
参考代码:

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>

参考文章:https://www.web-tinker.com/article/20637.html

五、bootstrap的panel组件,或者easyui的window组件,有点类似这个效果;

六、通过一个 include.js 控制引入文件。

1、将下方js文件代码保存成 include.js 文件引入;

2、在页面中通过 <include src=""><include> 载入模板文件。

参考代码:

<include src="templates/header.html"></include>

js文件代码:

(function(window, document, undefined) {
var Include39485748323 = function() {}
Include39485748323.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length;
for(var i = size - 1; i >= 0; i--){
callback.apply(array[i], [i]);
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);
return localhostPaht+projectName;
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0;
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
o.open('get', url, false);
o.send(null);
return o.responseText;
},
parseNode: function(content) {
var objE = document.createElement("div");
objE.innerHTML = content;
return objE.childNodes;
},
executeScript: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g;
var r = "";
while(r = mac.exec(content)) {
    eval(r[1]);
}
},
getHtml: function(content) {
    var mac = /<script>([\s\S]*?)<\/script>/g;
    content.replace(mac, "");
    return content;
},
getPrevCount: function(src) {
    var mac = /\.\.\//g;
    var count = 0;
    while(mac.exec(src)) {
        count++;
    }
    return count;
},
getRequestUrl: function(filePath, src) {
    if(/http:\/\//g.test(src)){ return src; }
    var prevCount = this.getPrevCount(src);
    while(prevCount--) {
        filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);
    }
    return filePath + "/"+src.replace(/\.\.\//g, "");
},
replaceIncludeElements: function() {
    var $this = this;
    var filePath = $this.getFilePath();
    var includeTals = document.getElementsByTagName("include");
    this.forEach(includeTals, function() {
        //拿到路径  
        var src = this.getAttribute("src");
        //拿到文件内容  
        var content = $this.getFileContent($this.getRequestUrl(filePath, src));
        //将文本转换成节点  
        var parent = this.parentNode;
        var includeNodes = $this.parseNode($this.getHtml(content));
        var size = includeNodes.length;
        for(var i = 0; i < size; i++) {
            parent.insertBefore(includeNodes[0], this);
        }
        //执行文本中的额javascript  
        $this.executeScript(content);
        parent.removeChild(this);
        //替换元素 this.parentNode.replaceChild(includeNodes[1], this);  
    })
}
}
window.onload = function() {
    new Include39485748323().replaceIncludeElements();
}
})(window, document)


参考:

1、html中引入调用另一个html的方法

2、html静态页面引入公共html页面

未经允许不得转载:Web前端开发资源网 » html中引入调用另一个公用html模板文件的方法

推荐阅读:

Animate.css动画库的安装与使用

阿里巴巴矢量图标库 iconfont 的使用方法

写一写今天用阿里云安装wdCP搭建网站踩的坑

SQL语句的基本命令总结

js获取input上传文件的文件名和扩展名的方法

赞 (1)
分享到: +

评论 板凳

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    Deshun
    莫名其妙的原文章已经有近5w的阅读量,却总是504错误,只能重发一下,强制重定向过来了。。。
    Deshun 3年前 (2021-04-30)回复 取消评论