返回上一頁(yè)并刷新

返回上一頁(yè)，我們經(jīng)常用

history.go(-1)//返回上一頁(yè)(括號(hào)中寫-2代表返回上兩頁(yè))
history.back()//返回上一頁(yè)

這個(gè)我很久之前的一篇文章中也提及了！ 但是有時(shí)候有這樣的需求，我們?cè)谝粋€(gè)公共頁(yè)面中進(jìn)行了數(shù)據(jù)操作，操作完成之后用history.back()返回上一頁(yè)，我們希望上一頁(yè)的數(shù)據(jù)是改變的，但是由于是歷史返回，上一頁(yè)的數(shù)據(jù)還是歷史數(shù)據(jù)，因此，我們用到了返回上一頁(yè)并刷新。

self.location=document.referrer;

說(shuō)到這里，有必要對(duì)self.location和document.referrer的應(yīng)用做一下詳細(xì)介紹了！

self.location應(yīng)用

也是很久之前，我寫了一篇網(wǎng)頁(yè)防止黑客跨框架攻擊的文章，里面用到了：

<style> html{ visibility:hidden; }</style>
<script>
if( self == top){
        document.documentElement.style.visibility='visible';
}else{
        top.location = self.location;
}
</script>

這里，我們應(yīng)用到了一個(gè)self,其實(shí)，上面代碼的實(shí)際作用就是防止別人用框架嵌套我們的網(wǎng)頁(yè)，當(dāng)然為了防止被人嵌入你的網(wǎng)頁(yè)，也可以如下寫：

if (top.location != self.location) {  
top.location=self.location;  
}  

解釋

1、self:當(dāng)前窗口對(duì)象（如果是在iframe里，則為該框架的窗口對(duì)象）

2、top:父窗口對(duì)象

當(dāng)然，這些前面都可以添加一個(gè)window對(duì)象，也就是可以如下寫：

window.self

功能：是對(duì)當(dāng)前窗口自身的引用。它和window屬性是等價(jià)的。

注：window、self、window.self是等價(jià)的。

window.top

功能：返回頂層窗口，即瀏覽器窗口。

注：如果窗口本身就是頂層窗口，top屬性返回的是對(duì)自身的引用。

window.parent

功能：返回父窗口。

回到上面的正題

self.location 相當(dāng)于 window.self.location,自身的瀏覽器地址，在沒有嵌套頁(yè)面的時(shí)候也相當(dāng)于window.location

也就是頁(yè)面跳轉(zhuǎn)到 document.referrer 下面就來(lái)說(shuō)一下document.referrer

document.referrer

這個(gè)主要是獲取前一個(gè)訪問頁(yè)面的URL地址。

關(guān)于document.referrer的應(yīng)用，除了上面的返回上一頁(yè)，還有一個(gè)用途。用來(lái)做返回的跳轉(zhuǎn)?。吹綇?chǎng)涡翊笊?，前幾天也寫過(guò)類似這樣的一個(gè)應(yīng)用案例，好吧！我在這里再寫一下！）

例如返回上一頁(yè)的代碼如下：

<a href="javascript:history.back()" class="goback"></a>

上面代碼大部分是可以用的，但是有時(shí)候是不可以。微信分享進(jìn)來(lái)直接是內(nèi)頁(yè)，沒有上一頁(yè)的情況，這個(gè)沒有辦法返回，點(diǎn)擊是無(wú)效的！

針對(duì)這種情況，我們可以如下代碼：

if (document.referrer === '') {
    // 沒有來(lái)源頁(yè)面信息的時(shí)候，改成首頁(yè)URL地址
    $('.goback').attr('href', '/');
}

當(dāng)沒有來(lái)源的時(shí)候，返回改成首頁(yè)，這樣就是document.referrer的一個(gè)應(yīng)用了！

document.referrer的瀏覽器兼容性問題

1、HTTPS默認(rèn)會(huì)關(guān)閉referrer，需要通過(guò)meta來(lái)設(shè)置，設(shè)置方法如下：

<meta name="referrer" content="always">

2、直接在瀏覽器地址欄中輸入地址；

3、使用location.reload()刷新（location.href或者location.replace()刷新有信息）；

4、在微信對(duì)話框中，點(diǎn)擊鏈接進(jìn)入微信自身的瀏覽器；

5、掃碼進(jìn)入QQ或者微信的瀏覽器；

6、直接新窗口打開一個(gè)頁(yè)面；

7、a標(biāo)簽設(shè)置rel="noreferrer"（兼容IE7+）；

8、meta標(biāo)簽來(lái)控制不讓瀏覽器發(fā)送referer； 例如：

<meta content="never" name="referrer">

其他兼容性測(cè)試如下：

操作	IE6	IE7	IE8	IE9	Firefox	Chrome	Opera	Safari
直接在地址欄輸入U(xiǎn)RL	“”	“”	“”	“”	“”	“”	“”	“”
從書簽訪問URL	“”	“”	“”	“”	“”	“”	“”	“”
從頁(yè)面A點(diǎn)擊超鏈接，跳轉(zhuǎn)到頁(yè)面B（target=”_self”）	√	√	√	√	√	√	√	√
從頁(yè)面A點(diǎn)擊超鏈接，跳轉(zhuǎn)到頁(yè)面B（target=”_blank”）	√	√	√	√	√	√	√	√
從頁(yè)面A右鍵單擊超鏈接，在新標(biāo)簽頁(yè)中打開頁(yè)面B	-	√	√	√	√	√	√	“”
從頁(yè)面A右鍵單擊超鏈接，在新窗口中打開頁(yè)面B	√	√	√	√	√	√	√	“”
拖動(dòng)鏈接到地址欄	“”	無(wú)法拖動(dòng)	無(wú)法拖動(dòng)	“”	“”	“”	“”	“”
拖動(dòng)鏈接到標(biāo)簽欄	-	“”	“”	“”	“”	“”	“”	“”
使用瀏覽器的前進(jìn)、后退按鈕	√	√	√	√	√	√	√	√
JS 修改 location.href	“”	“”	“”	√	√	√	√	√
JS 使用 window.open	“”	“”	“”	“”	√	√	√	√
服務(wù)器重定向（302跳轉(zhuǎn)）	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面	定向之前的頁(yè)面
頁(yè)面 Meta Refresh	“”	“”	“”	“”	“”	轉(zhuǎn)向頁(yè)	轉(zhuǎn)向頁(yè)	轉(zhuǎn)向頁(yè)