<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
div {
100px;
height: 100px;
border: 1px solid red;
margin-left: 200px;
margin-bottom: 20px;
}
.demo1,
.demo3 {
background: green;
}
.demo2,
.demo4 {
background: blue;
}
</style>
<script type="text/javascript">
$(function() {
$(".demo1").click(function() {
//可回退，替换当前页面
window.location.href = "https://www.baidu.com/";
});
$(".demo2").click(function() {
//可回退，替换当前页面
window.location.assign("https://www.baidu.com/");
})
$(".demo3").click(function() {
//刷新当前页面当取值为 true 时，将强制浏览器从服务器重新获取当前页面资源，
//而不是从浏览器的缓存中读取，如果取值为 false 或不传该参数时，
//浏览器则可能会从缓存中读取当前页面。
window.location.reload(true);
})
$(".demo4").click(function() {
//不可回退
window.location.replace("https://www.baidu.com/");
})
})
</script>
</head>
<body>
<div class="demo1">
</div>
<div class="demo2">
</div>
<div class="demo3">
</div>
<div class="demo4">
</div>
</body>
</html>
效果图：
网页布局
<p>操作成功</p>
<strong>5</strong><span>秒后回到主页</span><a href="javascript:history.back();">返回</a>
任务：
1.打开网页后，如果不做任何操作则返回到一个新的页面
var num=document.getElementsByTagName("strong")[0].innerHTML;
//获取显示秒数的元素，通过定时器来更改秒数。
function count(){
num--;
document.getElementsByTagName("strong")[0].innerHTML=num;
if(num==0){
location.assign("www.imooc.com");
}
}
setInterval("count()",1000);
2.点击返回则返回到前一个页面
function backTo(){
window.history.back();
}
location和history是window中的对象
location.assign()方法用来加载一个新的文档
history.back()方法可以加载历史列表中的前一个URL
window.location事件
一、最外层top跳转页面，适合用于iframe框架集
top.window.location.href("${pageContext.request.contextPath}/Login_goBack");
============================================================================================
二、window.location.href和window.location.replace的区别
1.window.location.href=“url”：改变url地址；
2.window.location.replace(“url”)：将地址替换成新url，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，
因此当使用replace方法之后，你不能通过“前进”和“后 退”来访问已经被替换的URL，这个特点对于做一些过渡页面非常有用！
三、强制页面刷新
1.window.location.reload()：强制刷新页面，从服务器重新请求！
============================================================================================
四、window.location.reload();页面实现跳转和刷新
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
这几个都可以刷新
window.location.reload();刷新
window.location.href=window.location.href;刷新
window.close();关闭窗口，不弹出系统提示，直接关闭
window.close()相当于self属性是当前窗口
window.parent.close()是parent属性是当前窗口或框架的框架组
页面实现跳转的九种方法实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigate</title>
<script language="javascript">
setTimeout('window.navigate("top.html");',2000);
setTimeout('window.document.location.href="top.html";',2000);
setTimeout('window.document.location="top.html";',2000);
setTimeout('window.location.href="top.html";',2000);
setTimeout('window.location="top.html";',2000);
setTimeout('document.location.href="top.html";',2000);
setTimeout('document.location="top.html";',2000);
setTimeout('location.href="top.html";',2000);
setTimeout('location.replace("top.html")',2000);
//window对象
//document对象
//location对象
//href属性
//1.window.document.location.href
//2.window.document.location
//3.window.location.href
//4.window.location
//5.document.location.href
//6.document.location
//7.location.href
//8.window.navigate
//9.location.replace
//只要使用location方法，和任意的window对象，location对象，href属性连用，都可以页面的跳转////
</script>
</head>
<body>
页面将在2秒后跳转
</body>
</html>
解释：
location是个对象，比如本页的document.location和window.location的属性有
location.hostname = community.csdn.net
location.href = http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02
location.host = community.csdn.net
location.hash =
location.port =
location.pathname = /Expert/topic/4033/4033372.xml
location.search = ?temp=2.695864E-02
location.protocol = http:
可见href是location的属性，类别是string。