<!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>

解释：
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。

location和history的更多相关文章

location 、history
location.href= location.reload() history.go() 0 1 -1 history.back() history.forward() history.le ...
match，location，history
哇,平常写路由时基本就是简单的按照组件给的示例写,从来没有考虑为什么,又遇见了路由相关的问题,先记录一下问题,好好捋一下,哎,好香要个大佬来带带我呀,每次遇到问题要解决好久问题: 判断是否登录之后跳 ...
[browser location和history] 简单实现了个路由[转载]
今天看了1下前面写的,好像缺乏交流性,周末再来弄吧 -0- 今天看了browser 的 location 和 history location属性 // //location.hash 性是一个可读可 ...
JS---BOM基本知识 (顶级对象，系统对话框，加载事件，location对象, history对象, navigator对象)
BOM JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM ...
BOM 3.1 location对象 | history对象 | navigator对象 | 定时器 | 三大系列
JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM---& ...
Location 位置 history
拆分出来地址让地址各归其位 search案例查找历史记录跳转
javascript深入之location对象和history对象
浏览器的location 和history对象: 一.location对象: 1>location.reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键. ...
backbone.Router History源码笔记
Backbone.History和Backbone.Router history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了. History类用于监听URL的变化, ...
浏览器history操作实现一些功能
返回拦截功能:从广告进入到落地页后,给history增加一个页面,拦截返回动作主要用到的是h5中的history对象,使用了pushState,和replaceState来操作. 并且加入了一些条 ...

随机推荐

python基础===PEP网站，代码规范指南
PEP 8是最古老的PEP之一,它向Python程序员提供了代码格式设置指南.PEP 8的篇幅很长,但大都与复杂的编码结构相关. https://python.org/dev/peps/pep-000 ...
JDBC数据源连接池(1)---DBCP
何为数据源呢?也就是数据的来源.我在前面的一篇文章<JDBC原生数据库连接>中,采用了mysql数据库,数据来源于mysql,那么mysql就是一种数据源.在实际工作中,除了mysql,往 ...
从一个R语言案例学线性回归
线性回归简介如下图所示,如果把自变量(也叫independent variable)和因变量(也叫dependent variable)画在二维坐标上,则每条记录对应一个点.线性回规最常见的应用场景 ...
mycncart自定义主题
本文是自己通过其他主题,自学的,如果有什么问题,可以提出建议? 参考资料:opencart官网 www.opencart.com 或 mycncart的官网上的一些教程 www.mycncart.c ...
hihocoder 1177 : 顺子
#1177 : 顺子时间限制:6000ms 单点时限:1000ms 内存限制:256MB 描述你在赌场里玩梭哈,已经被发了4张牌,现在你想要知道发下一张牌后你得到顺子的概率是多少? 假定赌场使用的 ...
redis之（三）redis的数据类型
［一］字符串类型(基本数据类型) --->字符串类型是redis的最基本的数据类型 --->能存储任何形式的字符串,(用户邮箱,json化的对象,一张图片) --->一个字符串类型的 ...
Redis实现分布式锁 php
一.分布式锁的作用: redis写入时不带锁定功能,为防止多个进程同时进行一个操作,出现意想不到的结果,so...对缓存进行插入更新操作时自定义加锁功能. 二.Redis的NX后缀命令 Redis有一 ...
操作cephfs的基本命令
[前提是已有一个基本可用的ceph集群] 一,在指定节点上部署mds: ceph-deploy mds create ceph-node1 二,新建两个存储池,用于保存cephfs的数据和元数据. c ...
python 编码处理
# -*- coding: utf-8 -*-import easygui as gimport sysreload(sys)sys.setdefaultencoding('utf-8')
洛谷P2783 有机化学之神偶尔会作弊
题目传送门啦啦啦,发个文纪念一下第一道在洛谷上A的黑题,一次性就过真是无比舒服-(虽然某些大佬说这题有点水……)题目其实思路不难,Tarjan缩点+LCA,不过因为是无向边,所以在Tarjan的时候 ...

location和history