html嵌套

用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嵌套:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值