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 相关文章推荐
jQuery中detach()方法用法实例
Dec 25 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
Angular2实现组件交互的方法分析
Dec 19 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
Node 模块原理与用法详解
May 13 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
PDO::errorInfo讲解
2019/01/28 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
查看django版本的方法分享
2018/05/14 Python
windows下python安装小白入门教程
2018/09/18 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
求职简历自荐信
2013/10/20 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
红旗方阵解说词
2014/02/12 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
颐和园英文导游词
2015/01/30 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android