如何嵌套一个网页html到另一个html中
2024-09-03 20:25:18
在常规网页开发中(单页应用除外哈),经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。
例如:一个网站的页脚信息在每个网页都是一样的,把它命名为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=% height=>
</object>
办公资源网址导航 https://www.wode007.com
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需要启动一个本地服务,同时需要同域名下访问才行。
最新文章
- 总结移动安全的测试点及详解allowbackup漏洞
- μC/OS-Ⅲ系统的时间管理函数和定时器
- Java的SPI机制与简单的示例
- AssetBundle系列——共享资源打包/依赖资源打包
- Sublime Text 之运行 ES6 (基于babel)
- C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码
- wuzhicms 后台登录存留时间实现方式
- 1063: [Noi2008]道路设计 - BZOJ
- linux 机器出现or type control d to continue问题的处理办法
- devexpress实现多行表头(复合表头),附源代码
- ASP.NET Cookie和Session
- poj1847 Tram 最短路Dijkstra
- java通过freemarker导出包含富文本图片的word文档
- C++中模板Template的使用
- phpcms 的getcache()函数
- C++函数式编程实现牛顿法
- mybatis自动生成
- IDEA15 下运行Scala遇到问题以及解决办法
- vue 监听路由变化
- Teradata的profile使用