js的跳轉(zhuǎn)

。 reload

reload 方法，該方法強迫瀏覽器刷新當前頁面。

語法：location.reload([bForceGet])

參數(shù)： bForceGet，可選參數(shù)，默認為 false，從客戶端緩存里取當前頁。true, 則以 GET 方式，從服務(wù)端取最新的頁面, 相當于客戶端點擊 F5("刷新")

reload() 方法用于重新加載當前文檔。

如果該方法沒有規(guī)定參數(shù)，或者參數(shù)是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務(wù)器上的文檔是否已改變。如果文檔已改變，reload() 會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。

2，replace 方法，該方法通過指定URL替換當前緩存在歷史里（客戶端）的項目，因此當使用replace方法之后，你不能通過“前進”和“后退”來訪問已經(jīng)被替換的URL。

語法： location.replace(URL)

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

此方法類似客戶端點F5刷新頁面，所以頁面method="post"時，會出現(xiàn)"網(wǎng)頁過期"的提示。

因為Session的安全保護機制。

當調(diào)用 location.reload() 方法時， aspx頁面此時在服務(wù)端內(nèi)存里已經(jīng)存在，因此必定是 IsPostback 的。

如果有這種應(yīng)用：需要重新加載該頁面，也就是說期望頁面能夠在服務(wù)端重新被創(chuàng)建，期望是 Not IsPostback 的。

這里，location.replace() 就可以完成此任務(wù)。被replace的頁面每次都在服務(wù)端重新生成。

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

返回并刷新頁面：

location.replace(document.referrer);

document.referrer //前一個頁面的URL

不要用 history.go(-1)，或 history.back();來返回并刷新頁面，這兩種方法不會刷新頁面。

附：

Javascript刷新頁面的幾種方法：

復(fù)制代碼代碼如下:

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>區(qū)域中

復(fù)制代碼代碼如下:

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

2，頁面自動跳轉(zhuǎn)：把如下代碼加入<head>區(qū)域中

復(fù)制代碼代碼如下:

其中20指隔20秒后跳轉(zhuǎn)到http://www.jb51.net頁面

3，頁面自動刷新js版

復(fù)制代碼代碼如下:

function myrefresh()

{

window.location.reload();

}

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

</script>

4，JS刷新框架的腳本語句

復(fù)制代碼代碼如下:

//刷新包含該框架的頁面用

parent.location.reload();

</script>

//子窗口刷新父窗口

self.opener.location.reload();

</script>

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

//刷新另一個框架的頁面用

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

</script>

如果想關(guān)閉窗口時刷新或想開窗時刷新，在<body>中調(diào)用以下語句即可。

復(fù)制代碼代碼如下:

<body onload="opener.location.reload()"> 開窗時刷新

<body onUnload="opener.location.reload()"> 關(guān)閉時刷新

window.opener.document.location.reload()

</script>

一、先來看一個簡單的例子：

下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。

frame.html 由上(top.html)下(bottom.html)兩個頁面組成，代碼如下：

復(fù)制代碼代碼如下:

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

<HTML>

<HEAD>

<TITLE> frame </TITLE>

</HEAD>

</frameset>

</HTML>

現(xiàn)在假設(shè)top.html (即上面的頁面) 有七個button來實現(xiàn)對bottom.html (即下面的頁面) 的刷新，可以用以下七種語句，哪個好用自己看著辦了。

top.html 頁面的代碼如下：

復(fù)制代碼代碼如下:

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

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

下面是bottom.html頁面源代碼，為了證明下方頁面的確被刷新了，在裝載完頁面彈出一個對話框。

復(fù)制代碼代碼如下:

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

解釋一下：

復(fù)制代碼代碼如下:

1.window指代的是當前頁面，例如對于此例它指的是top.html頁面。

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

3.frames是window對象，是一個數(shù)組。代表著該框架內(nèi)所有子頁面。

4.item是方法。返回數(shù)組里面的元素。

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>區(qū)域中

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

2.頁面自動跳轉(zhuǎn)：把如下代碼加入<head>區(qū)域中

其中20指隔20秒后跳轉(zhuǎn)到http://www.jb51.net頁面

3.頁面自動刷新js版

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

三、java在寫Servler,Action等程序時，要操作返回頁面的話（如談出了窗口，操作完成以后，關(guān)閉當前頁面，刷新父頁面）

復(fù)制代碼代碼如下:

1 PrintWriter out = response.getWriter();

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

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

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

5 //關(guān)閉窗口

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

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

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

四、JS刷新框架的腳本語句

1.如何刷新包含該框架的頁面用

復(fù)制代碼代碼如下:

parent.location.reload();

</script>

架

框架技術(shù)可以實現(xiàn)對靜態(tài)頁面的互相引用，提高靜態(tài)頁面的重用性，因為并不是所有的瀏覽器都能很好的支持，而且對搜索引擎可能也不是很友好，所以一般網(wǎng)頁使用并不多，但是對一些管理系統(tǒng)而言，框架還是很實用的，因為管理系統(tǒng)的布局比較簡單。每一個頁面的效果都差不多，一般使用下面這種布局。

這個布局頭部，菜單和尾部的內(nèi)容都是不會變化的，經(jīng)常變化的就是中間的操作頁面，所有可以把頭部，菜單和尾部以及主頁分別使用四個頁面設(shè)計，然后在定義一個框架頁面進行引入即可。

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中加載新頁面

運行上面代碼發(fā)現(xiàn)超鏈接是在新的窗口中打開了，如果需要在主框架中顯示，要先給這個主框架定義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動圖的效果的實現(xiàn).

效果素材要求

素材是類似雪碧圖的方式,圖上有n幀形狀

實現(xiàn)方法

合適的做法，是將所有的動畫幀合并成一張圖，通過改變background-position的值來實現(xiàn)動畫幀切換。因此，逐幀動畫也被稱為“精靈動畫（sprite animation）”。

通過css3動畫

width: 32px; height: 32px;：設(shè)置元素的寬度和高度為 32 像素(可以根據(jù)實際圖片幀的大小設(shè)置)

background-size: 32px 800px;：指定背景圖片的尺寸，第一個參數(shù)表示寬度為 32 像素，第二個參數(shù)表示高度為 800 像素。(根據(jù)實際圖片的高度設(shè)置,也可以設(shè)置實際高度的倍數(shù))

設(shè)置動畫效果，bear 是動畫名稱，1s 表示動畫持續(xù)時間為 1 秒，steps(4, end) 表示動畫采用 4 步，每一步切換到最后一幀，infinite 表示動畫無限循環(huán)播放。

定義動畫的最后一幀，設(shè)置背景圖片位置為 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循環(huán)調(diào)用實現(xiàn)

constructor(width, sleep = 0.2, size = 21)：接受三個參數(shù)，分別是圖標的寬度、每幀動畫間隔的時間（默認為 0.2 秒）、動畫的總幀數(shù)（默認為 21）。
begin()：開始播放動畫的方法。它首先查詢所有具有 .marker-animate-gif 類的元素，然后調(diào)用 animate() 方法開始動畫播放。
animate(timestamp)：動畫播放函數(shù)，接受一個時間戳參數(shù)。它通過計算時間戳的差值來控制動畫的播放速度。如果已經(jīng)過了指定的時間間隔或是第一幀，就會更新每個動畫元素的背景位置以實現(xiàn)動畫效果。最后，通過調(diào)用 requestAnimationFrame() 方法循環(huán)調(diào)用自身，實現(xiàn)動畫的持續(xù)播放


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))
    }
}