<!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 {
width: 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。