html里面怎么引别的页面_html中引入调用另一个公用html模板文件的方法

查了一下资料,发现html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧:

其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。

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

参考代码:

$("#page1").load("page/Page_1.html");

$("#page2").load("page/Page_2.html");

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

参考代码:

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

参考代码:

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

参考代码:

console.log(page1.import.body.innerHTML);

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

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

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

2、在页面中通过  载入模板文件。

参考代码:

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 = /

var r = "";

while(r = mac.exec(content)) {

eval(r[1]);

}

},

getHtml: function(content) {

var mac = /

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)

参考:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值