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

location和history的更多相关文章

  1. location 、history

    location.href= location.reload() history.go()  0   1  -1 history.back() history.forward() history.le ...

  2. match,location,history

    哇,平常写路由时基本就是简单的按照组件给的示例写,从来没有考虑为什么,又遇见了路由相关的问题,先记录一下问题,好好捋一下,哎,好香要个大佬来带带我呀,每次遇到问题要解决好久 问题: 判断是否登录之后跳 ...

  3. [browser location和history] 简单实现了个路由[转载]

    今天看了1下前面写的,好像缺乏交流性,周末再来弄吧 -0- 今天看了browser 的 location 和 history location属性 // //location.hash 性是一个可读可 ...

  4. JS---BOM基本知识 (顶级对象,系统对话框,加载事件,location对象, history对象, navigator对象)

    BOM JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM ...

  5. BOM 3.1 location对象 | history对象 | navigator对象 | 定时器 | 三大系列

    JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM---& ...

  6. Location 位置 history

    拆分出来地址  让地址各归其位 search案例 查找历史记录跳转

  7. javascript深入之location对象和history对象

    浏览器的location 和history对象: 一.location对象: 1>location.reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键. ...

  8. backbone.Router History源码笔记

    Backbone.History和Backbone.Router history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了. History类用于监听URL的变化, ...

  9. 浏览器history操作实现一些功能

    返回拦截 功能:从广告进入到落地页后,给history增加一个页面,拦截返回动作 主要用到的是h5中的history对象,使用了pushState,和replaceState来操作. 并且加入了一些条 ...

随机推荐

  1. monkey测试===什么是monkey测试(系列一)转

    本文转自:http://www.cnblogs.com/liu-ke/p/4353926.html Monkey工具使用 一. 什么是Monkey Monkey是Android中的一个命令行工具,可以 ...

  2. 苹果电脑Mac OS系统重装图文详解

    苹果电脑Mac OS系统重装图文详解 本文来自于[系统之家] www.xp85.com现在电脑都很强大,可是也很脆弱,常常需要你去维护,甚至经常需要你重装系统,那么Mac OS又如何重装系统呢?刚刚使 ...

  3. Go语言大神亲述:历七劫方可成为程序员!

    “历劫1”:你坚信你可以用Go来做面向对象编程? 在经历了一次Go应用之旅之后,你可能就会开始思考:“怎么样才能让这种语言更像面向对象的编程语言?”因为你已经习惯了这种编程,你想要制作健壮的代码.想要 ...

  4. display:inline、block、inline-block三者之间的区别

    1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...

  5. linux命令(45):diff命令

    1.命令格式: diff[参数][文件1或目录1][文件2或目录2] 2.命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时才有效.以逐行的方式,比较文 ...

  6. jps命令学习

    jps命令学习 标签(空格分隔): jvm jps介绍 ( JVM Process Status Tool ) 网文 jps命令用于查看当前Java进程及其pid等相关信息,同ps -ef | gre ...

  7. MapReduce案例一:天气温度

    1.需求 2.思路 3.代码实现 3.1MyWeather 类代码: 这个类主要是用来定义hadoop的配置,在执行计算程序时所需加载的一些类. package com.hadoop.mr.weath ...

  8. 《逐梦旅程 WINDOWS游戏编程之从零开始》笔记6——四大变换&光照与材质

    第13章 四大变换 在Direct3D中,如果为进行任何空间坐标变换而直接绘图的话,图形将始终处于应用程序窗口的中心位置,默认这个位置就成为世界坐标系的原点(0,0,0).而且我们也不能改变观察图形的 ...

  9. 五十六 SMTP发送邮件

    SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责构造邮件, ...

  10. php jsonp跨域访问

    项目中有个上传图片需要实时预览的,但又是两个系统的访问,故想了一下解决方案: 在新系统中上传图片后处理设置session,旧系统跨域访问获取对应session,进行对应模板预览. 上传图片预览按钮对应 ...