Javascript document.referrer判断访客来源网址

使用JavaScript判断网站访问来源及优化体验
文章介绍了如何利用JavaScript的document.referrer属性来判断网站的访问来源,以便在结束合作关系后阻止特定链接或提示用户。这种方法不仅可以防止误解,还能优化用户体验,例如通过识别搜索引擎来定制内容。此外,文中还提到了根据userAgent和platform属性判断不同设备和操作系统的技巧。

今天遇到一个蛮有趣的问题,由于公司与一些厂商有合作关係,因此双方的网站中也都会交换连结,当今天合约也终止后,但对方始终一直没把连结的部分下掉时,这有时会产生一些不必要的误会,让一般的使用者认为双方还有合作关係,固然说这样子可赚到一些流量,但相对的也造成了一些误解,因此上头则希望能否去判断使用从它站连来时,就把它拒绝在门外,这让梅干退了三步,原本以为要从主机来作设定,上网找了一些文件后,才发现只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施。

效果图:

<script type="text/javascript"> 
  var refurl=document.referrer; 
  if(refurl.indexOf("wowgame")>-1){ 
    alert("你的来源网址为:【"+document.referrer+"】目前本站与该站已终止合作。"); 
    location.replace(refurl); 
  }   
</script>

其实方法真的很简单,因此下次若各位也有遇到此问题时,也可试试看此方法,这边梅干是将它再把网页导回去,而各位也可多花点功夫,当判断是某网址连入时,跳到某一个宣告,让网友知道双方已经终止合作,顺便还可以赚点流量。

应用范围:一般用于检查来源页面的关键词,一般是用来判断用户通过搜索引擎来的用户,输入了什么关键词进来的,然后进行判断。右下角给出相关的链接。

对于增强用户体验有很大的好处,让访客快速的找到相关信息。

下面是一些特殊的补充

js如何判断访问来源是来自搜索引擎(蜘蛛人)还是直接访问

以下javascript脚本代码可以实现判断访问是否来自搜索引擎。
代码如下:

< script type = "text/javascript" >
if (window.name != 'ad_app6') {
  var r = document.referrer;
  r = r.toLowerCase(); //转为小写
  var aSites = new Array('google.', 'baidu.', 'soso.', 'so.', '360.', 'yahoo.', 'youdao.', 'sogou.', 'gougou.');
  var b = false;
  for (i in aSites) {
    if (r.indexOf(aSites[i]) > 0) {
      b = true;
      break;
    }
  }
  if (b) {
    self.location = '要跳转的网址';
    window.adworkergo = 'ad_app6';
  }
} < /script>/

介绍的这个JS判断蜘蛛来源的方法脚本是写在body的onload里面的。即页面加载时进行判断。代码如下:

body {
  onload: expression(
  if (window.name != "Yang") {
    var str1 = document.referrer;
    str1 = str1.toLowerCase();
    var str6 = 'google.';
    var str7 = 'baidu.';
    var str4 = 'yahoo.';
    var str8 = 'youdao.';
    var str9 = 'sogou.';
    var str5 = 'soso.';
    if (str1.indexOf(str7) > 0 || str1.indexOf(str6) > 0 || str1.indexOf(str4) > 0 || str1.indexOf(str3) > 0 || str1.indexOf(str8) > 0 || str1.indexOf(str9)

    > 0 || str1.indexOf(str5) > 0 && "zh-cn" == navigator.systemLanguage) {
      self.location = 'http://www.abc.com/';
      window.name = "Yang";
    }

  });
}

这个JS判断蜘蛛来源方法不太好用。特别是在需要判断更多蜘蛛来源时代码写起来比较麻烦。

js判断访问来源

主要是判断pc android ios等

通过navigator的userAgent属性来判定
userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。
例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)

function checkBrowser(){
var browser={   
 versions:function(){      
 var u = navigator.userAgent, app = navigator.appVersion;
 return {
  //移动终端浏览器版本信息         
  trident: u.indexOf('Trident') > -1, //IE内核         
  presto: u.indexOf('Presto') > -1, //opera内核         
  webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核         
  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核         
  mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端         
  ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端         
  android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器         
  iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器         
  iPad: u.indexOf('iPad') > -1, //是否iPad         
  webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部       
  };     
 }(),     
  language:(navigator.browserLanguage || navigator.language).toLowerCase() 
 } 
if( browser.versions.android || browser.versions.iPhone || browser.versions.iPad){ 
 window.location.href="http://daimami.com“

 }
}

通过navigator的platform来判断
platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台。虽然该属性没有标准的值集合,但它有些常用值,比如 "Win32"、"MacPPC" 以及 "Linuxi586",等等。

<!-- 
//平台、设备和操作系统 
var system ={ 
win : false, 
mac : false, 
xll : false //X11也叫做X Window系统,X Window系统 (X11或X)是一种 位图 显示的 视窗系统 。它是在 Unix 和 类Unix 操作系统 ,以及 OpenVMS 上建立图形用户界面 
的标准工具包和协议,并可用于几乎所有已有的现代操作系统。
}; 
//检测平台 
var p = navigator.platform; 
alert(p); 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
//跳转语句 
if(system.win||system.mac||system.xll){ //转向电脑端

window.location.href="www.daimami.com"; 
}else{ 
window.location.href="www.daimami.com"; //转向手机端}

以上就是Javascript document.referrer判断访客来源网址的详细内容

原文:Javascript document.referrer判断访客来源网址_javascript技巧_脚本之家

 

<think> 我们被要求解释JavaScript中`location.href = document.referrer`的含义和使用。 根据提供的引用,我们可以总结如下: 1. `document.referrer`:获取当前页面的来源页面的URL(即用户是从哪个页面跳转过来的)。它相当于PHP中的`$_SERVER['HTTP_REFERER']`,但需要注意拼写是`referrer`(两个r)[^2]。 2. `location.href`:获取或设置当前页面的完整URL。当给`location.href`赋值时,浏览器会导航到该URL。 3. `location.href = document.referrer`:这行代码的作用是让浏览器跳转到来源页面(即上一页)。它实际上是执行了一次“返回”操作,但注意,这并不等同于浏览器的后退按钮(因为后退按钮是浏览历史的上一条记录,而这里直接指定了目标URL)。 使用场景: - 常见的场景是“返回”按钮的功能。当用户点击一个返回按钮时,我们可以用这行代码将用户带回到上一页面。 - 但是,需要注意`document.referrer`存在一些兼容性和使用限制: - 在Safari中,如果用户是通过右键菜单打开链接,则`document.referrer`可能为空[^4]。 - 在IE中,通过`window.open`或修改`location.href`跳转可能会丢失referrer(但IE9使用`location.href`跳转不会丢失)[^4]。 - 使用meta跳转时,IE和Firefox下会丢失referrer[^4]。 - 另外,如果用户直接在地址栏输入地址或通过书签访问,则`document.referrer`为空字符串。 因此,在实际使用中,我们需要考虑这些情况,并做好兼容性处理。例如,如果`document.referrer`为空,可能要跳转到默认页面或使用`history.back()`。 另外,引用[1]和[3]中提到了一些技巧: - 引用[1]:在跳转时拼接参数(避免缓存)时,需要判断来源URL是否已有参数,从而决定使用`?`还是`&`。 - 引用[3]:在IE中,为了保留referrer,使用了一个技巧:创建一个`<a>`标签并模拟点击,这样在跳转后,目标页面依然可以获取到referrer。 因此,我们可以这样总结: ### 含义 `location.href = document.referrer` 表示将当前页面的地址设置为来源页面的地址,从而让浏览器跳转回来源页面。 ### 使用场景 1. 实现返回上一页的功能。 2. 在需要返回到来源页面的场景,如表单提交后返回等。 ### 注意事项 1. `document.referrer`可能为空(如直接访问、书签、某些浏览器的特殊情况等),因此在使用前应检查: ```javascript if (document.referrer) { location.href = document.referrer; } else { // 没有来源页面,可以跳转到默认页面或使用history.back() history.back(); } ``` 2. 为了确保跳转后的页面不被缓存(例如,在返回时希望看到更新),可以在URL后添加随机参数(引用[1]): ```javascript if (document.referrer) { var connector = document.referrer.indexOf('?') > -1 ? '&' : '?'; location.href = document.referrer + connector + 'r=' + Math.random(); } ``` 3. 对于IE的兼容性问题,特别是需要保留referrer的情况,可以使用引用[3]中的方法(通过创建a标签并模拟点击)来跳转。 ### 示例代码 下面是一个实现返回上一页并避免缓存的函数(考虑了来源为空的情况): ```javascript function goBackWithCacheBuster() { if (document.referrer) { var connector = document.referrer.indexOf('?') > -1 ? '&' : '?'; // 添加随机参数防止缓存 location.href = document.referrer + connector + 'nocache=' + Math.random(); } else { // 如果没有来源,则使用history.back()返回,如果历史记录为空,则跳转到首页 if (history.length > 1) { history.back(); } else { location.href = '/'; // 跳转到首页或其他默认页面 } } } ``` ### 总结 `location.href = document.referrer`是一种常用的返回上一页的方法,但由于浏览器的兼容性和`document.referrer`的局限性,实际使用中需要谨慎处理。建议在跳转前检查`document.referrer`是否存在,并考虑添加缓存破坏参数。在需要保留referrer的场景(如目标页面需要知道来源),可以采用创建a标签模拟点击的方法来跳转(特别是在IE中)[^3]。 §§相关问题§§ 1. 如何解决`document.referrer`在Safari或IE中为空的问题? 2. 除了`document.referrer`,还有哪些方法可以实现返回上一页的功能? 3. 如何防止浏览器缓存页面,导致返回时看不到更新? 4. 在哪些场景下使用`location.href = document.referrer`可能不安全? </think> ### `location.href = document.referrer` 的含义与作用 #### 1. **核心含义** 该代码表示 **将浏览器重定向到当前页面的来源页面(即上一页)**。 - `document.referrer`:获取当前页的来源 URL(即用户是从哪个页面跳转过来的)[^2][^4]。 - `location.href`:设置或获取当前页面的完整 URL,赋值时会触发页面跳转[^2][^5]。 组合后的效果是 **强制返回上一页**。 #### 2. **典型使用场景** - **“返回”按钮功能**: 用户点击后退按钮时,直接跳转至来源页面。 ```javascript document.getElementById("backBtn").onclick = function() { location.href = document.referrer; }; ``` - **表单提交后的跳转**: 提交表单后自动返回来源页(如商品详情页提交后返回列表页)。 - **防盗链处理**: 验证图片来源是否合法,非法则用 `location.href` 重定向至来源站[^2]。 --- ### 关键注意事项与兼容性问题 #### 1. **`document.referrer` 的可靠性** - **可能为空的情况**: - 用户直接输入地址访问(无来源页)。 - 浏览器隐私模式。 - 使用 `meta` 标签跳转(IE/Firefox 会丢失 referrer)[^4]。 - Safari 中右键打开链接[^4]。 **安全代码示例**: ```javascript if (document.referrer) { location.href = document.referrer; // 有来源页时跳转 } else { history.back(); // 无来源页时用历史记录后退 } ``` #### 2. **参数拼接问题** 向来源页添加参数时需检查 URL 是否已包含 `?`: ```javascript if (document.referrer.includes('?')) { location.href = document.referrer + "&nocache=" + Math.random(); } else { location.href = document.referrer + "?nocache=" + Math.random(); } // 添加随机参数防止缓存 [^1] ``` #### 3. **浏览器兼容性** - **IE 特殊处理**: IE 下直接修改 `location.href` 可能丢失 referrer。需用 `<a>` 标签模拟点击[^3]: ```javascript if (isIE) { const link = document.createElement('a'); link.href = document.referrer; document.body.appendChild(link); link.click(); // IE 保留 referrer 的写法 } ``` - **拼写错误**: `referrer` 易错写成 `referer`(正确拼写带两个 `r`)[^2]。 --- ### 与类似技术的对比 | **方法** | **特点** | |------------------------|--------------------------------------------------------------------------| | `history.back()` | 基于浏览器历史栈后退,不依赖 referrer,但无法跨域。 | | `location.replace()` | 替换当前页(不产生历史记录),但需手动指定 URL。 | | `location.href = ...` | 依赖 `document.referrer` 实现动态跳转,可跨域但存在兼容性问题[^4][^5]。 | --- ### 总结 - **核心作用**:模拟浏览器“返回”行为,跳转至来源页。 - **适用场景**:返回按钮、表单提交后跳转、防盗链。 - **必做检查**: 1. 验证 `document.referrer` 非空。 2. 处理参数拼接(`?` 与 `&`)。 3. 针对 IE 使用 `<a>` 标签兼容方案[^3][^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值