html文件引入其它html文件方法详解

最新推荐文章于 2024-03-29 11:19:59 发布

chenmou4210

最新推荐文章于 2024-03-29 11:19:59 发布

阅读量7.5k

点赞数 2

文章标签： javascript java xhtml ViewUI

原文链接：https://my.oschina.net/u/3986411/blog/3061928

版权

引入后主页面的CSS样式不适用于被引入页面

比如，在主页面设置

<style>
* {
	margin: 0;
	padding: 0;
}
</style>

只在本页面生效，引入文件整体适用，但引入文件内容不适用。

1. iframe引入

a.html引入b.html的内容：

<iframe runat="server" src="b.html" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>

参数：

（1）runat="server" 这个最好加上，iframe跳转 asp.net可在当前iframe中跳转；

（2）src 链接到要导入的b.html的URL地址；

（3）frameborder 是否显示边框（0：无边框，1：有边框）；

（4）scrolling 是否有滚动条（yes有滚动条 no无滚动条）；

（5）allowtransparency 背景是否透明（yes透明 no不透明）；

2. import引入(<head>中引入文件，<script>中加载内容)
href链接引入的html文件，id可以看做页面引导，在script中用到

<head>
    <meta charset="utf-8" />
    <title>主页</title>
    <!--import引入-->
    <link rel="import" href="top.html" id="page1"/>
    <link rel="import" href="footer.html" id="page2"/>
</head>

<!--注意顺序-->
<!--import在头部引入，里面是啥就是啥-->
<script type="text/javascript">
    document.write(page1.import.body.innerHTML);
</script>
Hello World!<!--本页面写入内容-->
<script type="text/javascript">
    document.write(page2.import.body.innerHTML);
</script>

import引入除开script标签，在其他html body中写入什么就引入什么，完全的内容格式。

3. js引入

<!--注意顺序-->
<!--使用js引入，引入整个文档，但是没有html和body，相当于body里面的数据-->
<div class="top"></div>
<div class="center">
    <p>你好，我在中间！</p>
</div>
<div class="footer"></div>

<script src="js/jq/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    //在js中引入
    $(document).ready(function () {
        $('.top').load('top.html');
        $('.footer').load('footer.html');
    });
</script>

使用js引入，相当于把引入的html中head和body标签中的数据拖出来（不包括标签），在外面包了一个你自己写的标签，比如说上面代码中的<div class="top"></div>

4. include引入(涉及到一个从网上扒的封装函数,下面有)（head和body标签中的数据直接引入）

include是在a.html里面嵌入b.html的代码，是将代码拼凑完整，而不是在浏览器中嵌入一个浏览器。

优点：当重复代码修改一个小地方时候，只需在一个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-=1){
				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+=1
			}
			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+=1){
					parent.insertBefore(includeNodes[0],this)
				}
				$this.executeScript(content);
				parent.removeChild(this);
			})
		},
	};
	window.onload=function(){
		new Include39485748323().replaceIncludeElements()
	}
})(window,document);

5. <object>方式

<object style="border: 0px;" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

定义一个嵌入的对象。请使用此元素向您的XHTML页面添加多媒体。此元素允许您规定插入HTML文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

说明：<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型；而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

与iframe引入比较：

<!--object引入，相当于把整个页面拉过来（在一个html中嵌套另一个html），包括title,meta,body,html等-->
<!--此处的高是嵌套进去的整个html的高，不包括边框，padding等-->
<object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object>
        
<!--iframe引入，同object方式一样，页面整个嵌套，默认高度为150,frameborder设置为1时边框宽度为2-->
<iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>

相同点：

（1）默认高度为150；

（2）引入后本页面html嵌套引入页面html，整个引入；

（3）都带有滚动条。
不同点：

（1）iframe引入使用scrolling="no"可以不让页面进行滚动，取消右侧滚动条；

（2）iframe中 frameborder="no"可以修改为0或1，这里不是指宽度，可以理解为布尔型，当设为1时border宽度为2；

转载于:https://my.oschina.net/u/3986411/blog/3061928

chenmou4210

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
html文件引入其它html文件方法详解

引入后主页面的CSS样式不适用于被引入页面比如，在主页面设置 <style>* { margin: 0; padding: 0;}</style> 只在本页面生效，引入文件整体适用，但引入文件内容不适用。 1. iframe引入 a...
复制链接

扫一扫