由返回上一页并刷新页面想到的

返回上一页并刷新

返回上一页，我们经常用

history.go(-1)//返回上一页(括号中写-2代表返回上两页)
history.back()//返回上一页

这个我很久之前的一篇文章中也提及了！http://www.haorooms.com/post/js_refrash ，但是有时候有这样的需求，我们在一个公共页面中进行了数据操作，操作完成之后用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	“”	“”	“”	“”	“”	转向页	转向页	转向页

PREVIOUS: