IE中JS跳转丢失referrer问题的2个解决方法


Posted in Javascript onJuly 18, 2014

曾整理过一个各种页面跳转方法中referrer丢失的情况,其中提到,在IE中,使用类似 location.href = "a.html"这样的方式跳转页面时,在目标页面中 document.referrer的值会是空。这应该是IE的一个 bug。

大多数情况下,这个问题不会给我们带来麻烦,但有时候我们不得不用JavaScript来跳转,同时又要在下一个页面收集 document.refer,这时就得想想其他办法了。

Form GET方法

首先想到的是使用Form表单,用JS发起一个GET请求。代码类似下面这样:

function goToPage(url) {

    if (isIE) {

        // IE浏览器

        var frm = document.createElement("form");

        frm.action = url;

        frm.method = "GET";

        document.body.appendChild(frm);

        frm.submit();

    } else {

        // 非IE

        location.href = url;

    }

}

这个方法可以如同预期地工作,目标页面中 document.referrer能正常指向上一个页面。

A元素模拟点击方法

网上搜索了一下,发现司徒正美的博客上记录了这个问题的另一个处理方法:

//define for all browsers

function goto(url) {

    location.href = url;

}
//re-define for IE

if (isIE) {

    function goto(url) {

        var referLink = document.createElement('a');

        referLink.href = url;

        document.body.appendChild(referLink);

        referLink.click();

    }

}

原理很简单,先创建了一个 A元素,指定其 href属性为目标链接,然后再使用JS触发它的点击事件。经测试,在目标页面也能正常取到 document.referrer。

这个方法代码更简短一点,应该比上面的使用 form表单的方案更好一些。

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
js判断变量是否空值的代码
Oct 26 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
详谈js模块化规范
Jul 07 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 #Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现音乐下载器
2018/04/15 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
linux 下selenium chrome使用详解
2020/04/02 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
保研专家推荐信范文
2015/03/25 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
房屋所有权证明
2015/06/19 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS