用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

天下雪 2017-3-11 00:11

作者:Haorooms,来自原文地址返回上一页并刷新返回上一页,我们经常用history.go(-1)//返回上一页(括号中写-2代表返回上两页) history.back()//返回上一页这个我很久之前的一篇文章中也提及了!但是有时候有这样的 ...

作者:Haorooms,来自原文地址

返回上一页并刷新

返回上一页,我们经常用

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

其他兼容性测试如下:

操作IE6IE7IE8IE9FirefoxChromeOperaSafari
直接在地址栏输入URL“”“”“”“”“”“”“”“”
从书签访问URL“”“”“”“”“”“”“”“”
从页面A点击超链接,跳转到页面B(target=”_self”)
从页面A点击超链接,跳转到页面B(target=”_blank”)
从页面A右键单击超链接,在新标签页中打开页面B-“”
从页面A右键单击超链接,在新窗口中打开页面B“”
拖动链接到地址栏“”无法拖动无法拖动“”“”“”“”“”
拖动链接到标签栏-“”“”“”“”“”“”“”
使用浏览器的前进、后退按钮
JS 修改 location.href“”“”“”
JS 使用 window.open“”“”“”“”
服务器重定向(302跳转)定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面
页面 Meta Refresh“”“”“”“”“”转向页转向页转向页
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: Haorooms 来自: 原文地址

相关阅读