返回上一頁并刷新

返回上一頁，我們經常用

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

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

self.location=document.referrer;

說到這里，有必要對self.location和document.referrer的應用做一下詳細介紹了！

self.location應用

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

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

這里，我們應用到了一個self,其實，上面代碼的實際作用就是防止別人用框架嵌套我們的網頁，當然為了防止被人嵌入你的網頁，也可以如下寫：

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

解釋

1、self:當前窗口對象（如果是在iframe里，則為該框架的窗口對象）

2、top:父窗口對象

當然，這些前面都可以添加一個window對象，也就是可以如下寫：

window.self

功能：是對當前窗口自身的引用。它和window屬性是等價的。

注：window、self、window.self是等價的。

window.top

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

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

window.parent

功能：返回父窗口。

回到上面的正題

self.location 相當于 window.self.location,自身的瀏覽器地址，在沒有嵌套頁面的時候也相當于window.location

也就是頁面跳轉到 document.referrer 下面就來說一下document.referrer

document.referrer

這個主要是獲取前一個訪問頁面的URL地址。

關于document.referrer的應用，除了上面的返回上一頁，還有一個用途。用來做返回的跳轉！（看到張鑫旭大神，前幾天也寫過類似這樣的一個應用案例，好吧！我在這里再寫一下！）

例如返回上一頁的代碼如下：

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

上面代碼大部分是可以用的，但是有時候是不可以。微信分享進來直接是內頁，沒有上一頁的情況，這個沒有辦法返回，點擊是無效的！

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

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

當沒有來源的時候，返回改成首頁，這樣就是document.referrer的一個應用了！

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

1、HTTPS默認會關閉referrer，需要通過meta來設置，設置方法如下：

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

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

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

4、在微信對話框中，點擊鏈接進入微信自身的瀏覽器；

5、掃碼進入QQ或者微信的瀏覽器；

6、直接新窗口打開一個頁面；

7、a標簽設置rel="noreferrer"（兼容IE7+）；

8、meta標簽來控制不讓瀏覽器發送referer； 例如：

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

其他兼容性測試如下：

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