一般,我们现在都用ajax进行页面刷新,但是这样存在着一些问题
问题
1.ajax刷新页面后,地址栏地址没有变化
2.浏览器的前进后退按钮失效了
我们使用ASP.NET MVC做一个简单的例子
一个模板页和三个子页面,主页,关于和联系方式
先看看控制器原本的代码
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
我们需要将返回的视图修改为分部视图
如果是异步请求,则返回分部视图,否则返回正常的视图
当在浏览器输入地址时,则是同步请求;而当点击链接刷新时,则是异步请求
public class HomeController : Controller
{
public ActionResult Index()
{
if (Request.IsAjaxRequest())
return PartialView();
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
if (Request.IsAjaxRequest())
return PartialView();
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
if (Request.IsAjaxRequest())
return PartialView();
return View();
}
}
视图中_Layout.cshtml
@*<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>*@
<li><a href="javascript:void(0)" id="Index">主页</a></li>
<li><a href="javascript:void(0)" id="About">关于</a></li>
<li><a href="javascript:void(0)" id="Contact">联系方式</a></li>
其中href="javascript:void(0)"是了实现鼠标悬浮改变鼠标光标的效果
同时,添加一个更新目标
<div id="main">
@RenderBody()
</div>
在原本@RenderBody()的外面添加一个div,将分部视图更新到id为main的div中
最后就是JS代码了,也是最重要的部分
先看看几个重要的方法
history.pushState(data,title,url)
向浏览器插入浏览器记录
data:保存一些数据,可以保存url等
title:标题,但浏览器不支持该参数
url:浏览器显示的地址
history.replaceState(data,title,url)
替换浏览器记录
data:保存一些数据,可以保存url等
title:标题,但浏览器不支持该参数
url:浏览器显示的地址
windows.onpopstate
在点击浏览器的前进和后退按钮时触发该事件
在刷新页面时使用history.pushState,而在点击浏览器前进和后退按钮时使用history.replaceState
<script>
//局部更新,并向浏览器添加记录
function LoadMain(url) {
$("#main").load(url, function () {
history.pushState({ url: url }, "", url);
});
}
$("#Index").click(function () {
LoadMain("/Home/Index");
});
$("#About").click(function () {
LoadMain("/Home/About");
});
$("#Contact").click(function () {
LoadMain("/Home/Contact");
});
//禁止后退按钮
//$(document).ready(function () {
// if (window.history && window.history.pushState) {
// $(window).on('popstate', function () {
// window.history.forward(1);
// });
// }
//});
//解决浏览器前进后退按钮失效
$(window).on("popstate", function () {
var url = history.state.url;
//this.console.log(url);
$("#main").load(url, function () {
history.replaceState({ url: url }, "", url);
});
})
</script>
在解决浏览器前进后退按钮失效的方法,实际是点击浏览器的前进和后退时重新加载页面,并且也是局部更新
如果想禁止浏览器的后退按钮,则用下面代码
$(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
window.history.forward(1);
});
}
});
2020.04.05
上面还出现标题没有改变的问题
我们可以通过 document.title = title;来改变标题
我说的标题指的是浏览器窗口的标题
ajax局部更新改变标题
<script>
//解决第一次刷新标题为空的问题,如果没有添加则在点击后退按钮会出现标题为undefined的情况
document.title = "@ViewBag.Title";
//局部更新,并向浏览器添加记录
function LoadMain(url, title) {
this.document.title = title;
$("#main").load(url, function () {
history.pushState({ url: url, title: title }, "aaa", url);
});
}
$("#Index").click(function () {
LoadMain("/Home/Index","Home Page");
});
$("#About").click(function () {
LoadMain("/Home/About","About");
});
$("#Contact").click(function () {
LoadMain("/Home/Contact","Contact");
});
//禁止后退按钮
//$(document).ready(function () {
// if (window.history && window.history.pushState) {
// $(window).on('popstate', function () {
// window.history.forward(1);
// });
// }
//});
//解决浏览器前进后退按钮失效
$(window).on("popstate", function () {
var url = history.state.url;
var title = history.state.title;
document.title = title;
$("#main").load(url, function () {
history.replaceState({ url: url }, "", url);
});
});
</script>
参考
https://www.tuicool.com/articles/MvYnY3U
https://www.cnblogs.com/hutuzhu/p/4535234.html