html嵌套

最新推荐文章于 2024-06-04 14:32:38 发布

jsonya

最新推荐文章于 2024-06-04 14:32:38 发布

阅读量1k

点赞数

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/jsonya/article/details/70742952

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用html把首页分成三个部分header、main、footer或者更多。
其中header与footer在大多数的时候是公用的。
如何做到在不使用PHP、或者JSP等动态页面开发，页面里引入其他页面只需include()进来就可以实现页面分离。
使用html，也是可以实现页面分割的。
一：SSI
SSI是一种简单的动态网页制作技术，但是有些服务器要求网页扩展名为s.html才能识别文件中SSI命令。所以如果你的SSI命令看起来不工作，先别放弃，试着把文件名扩张为s,html，也许会成功。
使用SSI局限性是页面一定要放在碗也服务器上才能看到效果，在本地是不好调试的，当然如果非要在本地调试，就本地装一个Apacte服务器好了。

        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>

js:

$(function(){
       $('#header').load('header.html');
        $('#main').load('main.html');
       $('#footer').load('footer.html');
    })

使用jQuery的load()方法：载入远程文件代码并插入至DOM中。默认使用GET方式。
load（url,data,callback）
参数说明：
url:待加载的html网页网址
data：发送至服务器的key/value数据。在jQuery1.3中也可以接受一个字符串了。
callback：载入成功时的回调函数。
第二种加载方法：
function clientSideInclude(id, url) {
var req = false;

// Safari, Firefox, 及其他非微软浏览器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {

// For Internet Explorer on Windows
try {
req = new ActiveXObject(“Msxml2.XMLHTTP”);
} 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 浏览器，也可能会有其他可兼容的浏览器存在’;
}
}

重要说明：
通过load()方法载入的页面，页面格式比较好，Javascript可以从一个URL取到页面片段然后镶嵌在另一个页面的热和位置。其结果与服务器包含的结果基本上一样，但弊端是客户端必须开启JavaScript功能(目前大多数人是选择开去的，但也有少数出于安全方面的考虑不开启)。另一个弊端是搜索引擎看不到由JavaScript包含的页面的内容的，对于搜索引擎极度不友好，这对网站推广比较不利。

通过iframe嵌套：