js的跳转

。 reload

reload 方法，该方法强迫浏览器刷新当前页面。

语法：location.reload([bForceGet])

参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

reload() 方法用于重新加载当前文档。

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

2，replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

语法： location.replace(URL)

通常使用： location.reload() 或者是 history.go(0) 来做。

此方法类似客户端点F5刷新页面，所以页面method="post"时，会出现"网页过期"的提示。

因为Session的安全保护机制。

当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在，因此必定是 IsPostback 的。

如果有这种应用：需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。

这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

代码： location.replace(location.href);

返回并刷新页面：

location.replace(document.referrer);

document.referrer //前一个页面的URL

不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。

附：

Javascript刷新页面的几种方法：

复制代码代码如下:

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

自动刷新页面的方法:

1，页面自动刷新：把如下代码加入<head>区域中

复制代码代码如下:

其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中

复制代码代码如下:

其中20指隔20秒后跳转到http://www.jb51.net页面

3，页面自动刷新js版

复制代码代码如下:

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

4，JS刷新框架的脚本语句

复制代码代码如下:

//刷新包含该框架的页面用

parent.location.reload();

</script>

//子窗口刷新父窗口

self.opener.location.reload();

</script>

(　或　<a href="javascript：opener.location.reload()">刷新</a> )

//刷新另一个框架的页面用

parent.另一FrameID.location.reload();

</script>

如果想关闭窗口时刷新或想开窗时刷新，在<body>中调用以下语句即可。

复制代码代码如下:

<body onload="opener.location.reload()"> 开窗时刷新

<body onUnload="opener.location.reload()"> 关闭时刷新

window.opener.document.location.reload()

</script>

一、先来看一个简单的例子：

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下：

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> frame </TITLE>

</HEAD>

</frameset>

</HTML>

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。

top.html 页面的代码如下：

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> bottom.html </TITLE>

</HEAD>

<h1>This is the content in bottom.html.</h1>

</BODY>

</HTML>

解释一下：

复制代码代码如下:

1.window指代的是当前页面，例如对于此例它指的是top.html页面。

2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。

3.frames是window对象，是一个数组。代表着该框架内所有子页面。

4.item是方法。返回数组里面的元素。

5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。

附：

Javascript刷新页面的几种方法：

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

二、自动刷新页面

1.页面自动刷新：把如下代码加入<head>区域中

其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中

其中20指隔20秒后跳转到http://www.jb51.net页面

3.页面自动刷新js版

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面，刷新父页面）

复制代码代码如下:

1 PrintWriter out = response.getWriter();

2 out.write("<script type=\"text/javascript\">");

3 ////子窗口刷新父窗口

4 out.write("self.opener.location.reload();");

5 //关闭窗口

6 out.write("window.opener=null;");

7 out.write("window.close();");

8 out.write("</script>");

四、JS刷新框架的脚本语句

1.如何刷新包含该框架的页面用

复制代码代码如下:

parent.location.reload();

</script>

架

框架技术可以实现对静态页面的互相引用，提高静态页面的重用性，因为并不是所有的浏览器都能很好的支持，而且对搜索引擎可能也不是很友好，所以一般网页使用并不多，但是对一些管理系统而言，框架还是很实用的，因为管理系统的布局比较简单。每一个页面的效果都差不多，一般使用下面这种布局。

这个布局头部，菜单和尾部的内容都是不会变化的，经常变化的就是中间的操作页面，所有可以把头部，菜单和尾部以及主页分别使用四个页面设计，然后在定义一个框架页面进行引入即可。

1、frame页面

top.html

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

leftmenu.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

footer.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

main.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

2、总页面frame.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<base href="<%=basePath%>">
</head>
<frameset rows="20%,65%,*" border="1">
<frame src="top.html">
<frameset cols="25%,*">
<frame src="leftmenu.html">
<frame src="main.html" >
</frameset>
<frame src="footer.html">
</frameset><noframes></noframes>
<body>
</body>
</html>

效果如下：

3、在main中加载新页面

运行上面代码发现超链接是在新的窗口中打开了，如果需要在主框架中显示，要先给这个主框架定义name的属性，然后在修改leftmenu.html的超链接的target属性值，写上主框架的name的值，下面更改frame.html中的frameset代码如下：

补充register.html代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

然后在frame.html中点击注册效果如下：

大家好,我是yangyang.今天给大家上面视频中GIF动图的效果的实现.

效果素材要求

素材是类似雪碧图的方式,图上有n帧形状

实现方法

合适的做法，是将所有的动画帧合并成一张图，通过改变background-position的值来实现动画帧切换。因此，逐帧动画也被称为“精灵动画（sprite animation）”。

通过css3动画

width: 32px; height: 32px;：设置元素的宽度和高度为 32 像素(可以根据实际图片帧的大小设置)

background-size: 32px 800px;：指定背景图片的尺寸，第一个参数表示宽度为 32 像素，第二个参数表示高度为 800 像素。(根据实际图片的高度设置,也可以设置实际高度的倍数)

设置动画效果，bear 是动画名称，1s 表示动画持续时间为 1 秒，steps(4, end) 表示动画采用 4 步，每一步切换到最后一帧，infinite 表示动画无限循环播放。

定义动画的最后一帧，设置背景图片位置为 0, -800px，表示在 Y 轴上向上移动 800 像素.

.marker-animate-gif {
  width: 32px;
  height: 32px;
  background-size: 32px 800px;
  cursor: pointer;
  overflow: visible;
  opacity: 1;
  margin: 0 auto;
  visibility: visible;
  pointer-events: auto;
  animation: bear 1s steps(4, end) infinite;
  & ~ .marker-title {
    margin: 0 auto;
  }
  // 0% 20% 40% 80% 100%
  // 0 ~ 20
  // 20 ~ 40
  // 40 ~ 80
  // 80 ~ 100
  @keyframes bear {
    100% {
      background-position: 0, -800px;
    }
  }

通过requestAnimationFrame循环调用实现

constructor(width, sleep = 0.2, size = 21)：接受三个参数，分别是图标的宽度、每帧动画间隔的时间（默认为 0.2 秒）、动画的总帧数（默认为 21）。
begin()：开始播放动画的方法。它首先查询所有具有 .marker-animate-gif 类的元素，然后调用 animate() 方法开始动画播放。
animate(timestamp)：动画播放函数，接受一个时间戳参数。它通过计算时间戳的差值来控制动画的播放速度。如果已经过了指定的时间间隔或是第一帧，就会更新每个动画元素的背景位置以实现动画效果。最后，通过调用 requestAnimationFrame() 方法循环调用自身，实现动画的持续播放


export default class AnimateIcon {
    constructor(width, sleep = 0.2, size = 21) {
        // const gifItems = this.gifItems()
        // this.icons = gifItems.filter(item =>  iconKeys.include(item.key))
        this.sleep = sleep
        this.width = width
        this.size = size
        this.timer = null
        this.start = undefined
    }
    begin() {
        const elements = document.querySelectorAll('.marker-animate-gif')
        if (!elements.length) {
            return false
        }
        this.frame = 0
        this.timer = requestAnimationFrame(this.animate.bind(this))
    }
    animate(timestamp) {
        if (this.start === undefined) {
            this.start = timestamp
        }

        const elapsed = timestamp - this.start
        if (elapsed > 1000 * this.sleep || this.frame === 0) { 
            const elements = document.querySelectorAll('.marker-animate-gif')
            elements.forEach(element => {
                const width = element.clientWidth
                // const maxPos = width * this.size
                let yPos = 0
                if (this.frame >= this.size) {
                    this.frame = 0
                }
    
                yPos = (this.frame) * width // yPos >= maxPos ? maxPos : 
                element.style.backgroundPosition = `0 -${yPos}px`
                this.frame++
            })
            this.start = undefined
        }


        requestAnimationFrame(this.animate.bind(this))
    }
}