500元精品仿站

JS实现根据来源网址跳转到不同的URL

大鱼君 2019-08-25 建站相关 关键词:referrer,网址跳转,来源网站

根据用户来源呈现不同的网页内容,更加精准且有效的将优质内容展现给有需求的用户。网站运营的过程中,本文分享如何通过JS实现不同的来源跳转不同的页面。

下面直接附上一段案例代码:

<script language="JavaScript" type="text/javascript">  
    var regexp=/\.(baidu)(\.[a-z0-9\-]+){1,2}\//ig;  
    var where =document.referrer;  
    if(regexp.test(where))  
    {  
        window.location.href="http://www.hellodede.com"  
    }
</script>  

以上代码意思为 如果来源网站是百度的,则跳转到www.hellodede.com 主页

以此类推:

<script language="JavaScript" type="text/javascript">  
   var regexp=/\.(sogou|soso|baidu|google|youdao|yahoo|bing|118114|biso|gougou|ifeng|ivc|sooule|niuhu|biso|threesnow)(\.[a-z0-9\-]+){1,2}\//ig;
   var where = document.referrer;
   if(regexp.test(where))
   //if(where != null)
   {
      window.location.href='http://www.threesnow.com/xicheqi/'
   }
</script>

以上都是利用 JavaScript 中 document.referrer 属性,在变量regexp中 写入判定网址来源的 正则表达式。下面说说 JavaScript 中 document.referrer 用法详解

JavaScript 的 document 中有许多的属性,只有3种方法涉及到网页网址的请求,分别的 URL domain 和 reffrrer;

URL属性 包含当前页面完整的网址

domain属性 只包含当前页面的域名

reffrrer属性 则是保存着 当前页面 的 来源页面 的 URL , 简单来说,reffrrer 属性就是保存着上一页的URL

reffrrer 的作用有很多,比如说在一个页面中,我们需要加入一个返回上一页的按钮,我们可以给返回上一页的元素写上以下JS代码:

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏,当referrer属性不为空时让其显示
}

有人可能会说,还有别的方法也可以实现,比如这段JS

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面,也可以写成history.go(-1)
};

再比如说直接用 a 标签实现返回:

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

后者虽然也能实现页面的返回功能,但不够严谨。如果当前页面是别人分享过来的页面(浏览器打开的第一个页面),而不是通过其他页面点击进入的,那么返回上一页的按钮就失效了,因为history对象中不会存有任何属性。

当然也可以设置遇到这种情况可以当其按钮不显示(判断referrer是否为空)或跳回主页,这个可根据自身需求来决定。

500元精品仿站
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

Hello, 欢迎加入DEDECMS技术交流群,一起讨论织梦建站!

我要入群

织梦模板推荐

  • 台湾茶饮加盟类织梦网站模板(自适应)
  • 养老机构织梦网站模板(自适应)
  • 生物科技公司品牌展示网站织梦模板(自适应)
  • 家具品牌产品展示类织梦模板(自适应)
500元精品仿站

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧