用ajax做整站无刷新，怎么更改当前url呢
日期：2014-05-16 浏览次数：20362 次
用ajax做整站无刷新，如何更改当前url呢？
我现在有这样一个需求，请问大家能否实现，要兼容IE6+、火狐、谷歌。
网站有背景音乐，再点击不同页面的同时音乐的播放不能间断或者从头开始，必须是连续的，我用ajax实现了这一需求，但是这样的话页面的url永远是那一个不会更改，请问有什么方法可以在点击链接的同时更改页面的url而不刷新页面？
整个网站是用后台生成的静态页面。
------解决方案--------------------
锚
另外就只有https://developer.mozilla.org/en/DOM/window.history
不过IE6就不要想了。。。
------解决方案--------------------
做整站无刷新的话，你ajax调用过来的这些页就要确保只有内容，而没有头尾边栏等一大堆不相干的元素（除非你愿意调过来再截取，但这样就没有多少ajax的必要了），
但是做成纯内容的话，从搜索引擎过来的人直接进入内容页的话就不知道东南西北了。
好吧，假如你要做的是一个内部系统，不考虑搜索引擎的问题，除了首页入口外，别人通常不会直接访问内页，
现在就要用锚点来做整站无刷新了，这样ajax的时候，页面就只有锚点在变化了，比如，
假设我现在有四个HTML页面，
ajaxhome.htm 是ajax的入口主页,其它三个是内页
我现在有这样一个需求，请问大家能否实现，要兼容IE6+、火狐、谷歌。
网站有背景音乐，再点击不同页面的同时音乐的播放不能间断或者从头开始，必须是连续的，我用ajax实现了这一需求，但是这样的话页面的url永远是那一个不会更改，请问有什么方法可以在点击链接的同时更改页面的url而不刷新页面？
整个网站是用后台生成的静态页面。
------解决方案--------------------
锚
另外就只有https://developer.mozilla.org/en/DOM/window.history
不过IE6就不要想了。。。
------解决方案--------------------
做整站无刷新的话，你ajax调用过来的这些页就要确保只有内容，而没有头尾边栏等一大堆不相干的元素（除非你愿意调过来再截取，但这样就没有多少ajax的必要了），
但是做成纯内容的话，从搜索引擎过来的人直接进入内容页的话就不知道东南西北了。
好吧，假如你要做的是一个内部系统，不考虑搜索引擎的问题，除了首页入口外，别人通常不会直接访问内页，
现在就要用锚点来做整站无刷新了，这样ajax的时候，页面就只有锚点在变化了，比如，
假设我现在有四个HTML页面，
ajaxhome.htm 是ajax的入口主页,其它三个是内页
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax整站入口页</title>
<script type="text/javascript" src="jquery-1.6.4.min.js" ></script>
<script type="text/javascript" >
var ahref;
function convertAtoAjax(o) {
$(o).find("a").each(function() {
$(this).attr("href", "#" + $(this).attr("href"));
$(this).click(function() {
ahref = $(this).attr("href");
getajax();
});
});
}
function getajax() {
$.get(ahref.substr(1), function(data) {
$("#content").html(data);
convertAtoAjax("#content");
});
}
$(document).ready(function() {
convertAtoAjax("body");
var r = window.location.href.match(/#.*$/);
if (r) {
ahref = r[0];
getajax();
}
});
</script>
<style type="text/css" >
#content{border:1px solid red;}
</style>
</head>
<body>
<div id="nav">
<a href="ajax1.htm">页1</a>
<a href="ajax2.htm">页2</a>
</div>
<div id="content">welcome to ajax home</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
