如何嵌套一个网页html到另一个html中

时间: 2018-01-09阅读: 5373标签: 网页

在常规网页开发中(单页应用除外哈),经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。


例如:一个网站的页脚信息在每个网页都是一样的,把它命名为footer.html文件,在其他页面都包含它就可以了,在不使用php,jsp等动态语言的情况下,只通过客户端嵌套的办法:js和iframe/object的方式。


1.iframe的引入:

<iframe name="footer" marginwidth=0 marginheight=0 width=100% height=50 src="tooter.htm" frameborder=0>
</iframe>


2.object的方式:

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


3.js的实现方式:

一:jQuery有个load方法:

<script>
      jQuery(document).ready(function() {
          $("#page").load("footer.html");
      });
</script>

二:原生js实现:

<div id="includefooter"></div>
<script>
function clientSideInclude(id, url) {
	var req = false;
	if(window.XMLHttpRequest) {// Safari, Firefox, 及其他非微软浏览器
		try {
			req = new XMLHttpRequest();
		}catch(e) {
			req = false;
		}
	}else if(window.ActiveXObject) {	
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");// For Internet Explorer on Windows
		} catch(e) {
			try{
				req= new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				req = false;
			}
		}
	}
	var element = document.getElementById(id);
	if(!element) {
		alert("函数clientSideInclude无法找到id " + id + "," +"你的网页中必须有一个含有这个id的div 或 span 标签。");
		return;
	}
	if(req) {
		req.open('GET', url, false);// 同步请求,等待收到全部内容
		req.send(null);
		element.innerhtml = req.responseText;
	} else {
		element.innerhtml =
			"对不起,你的浏览器不支持" +"XMLHTTPRequest 对象。这个网页的显示要求" +
			"Internet Explorer 5 以上版本, " +"或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
	}
}
clientSideInclude('includefooter', 'footer.html')
</script>

说明:使用js需要启动一个本地服务,同时需要同域名下访问才行。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/343

网页tab键的实现

前端常用tab键的实现,用到的原理是当点击一个元素时,通过javascript操作css的display属性,达到控制另一个元素的显示(display: block)与不显示(display: none),需要注意的是,由于使用的是onclick事件

网页开发中利用CSS以图换字的多中实现方法总汇

CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法

h5网页水印SDK的实现代码示例

在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件,聊天背景就会有你的名字。那么如何实现网页水印效果呢?

网页设计十大流行趋势

最近看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特,配色改变反应了人们审美需求的改变。同色系网站设计将成为主流

使用 CSS 追踪用户

除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波

网页中文本朗读功能开发实现分享

同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

html转义字符大全_网页html特殊符号,特殊字符查看对照表(整理)

HTML字符实体,在HTML中,某些字符是预留的。比如不能使用小于号(&lt;)和大于号(&gt;),这是因为浏览器会误认为它们是标签。

JavaScript网页截屏方法,你get到了嘛?

之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备。技术路线很清晰,将网页的某个区域的内容生成图像

网页设计中的css指什么?

网页设计中的css指的是层叠样式表(Cascading Style Sheets),它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

html页面锚点链接对SEO的作用,以及实现描点的三种方式

锚链链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网页的重要程度有所提升,从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广