Javascript实例小应用：点击按钮或者链接后，把页面参数带到下个页面

JS小应用：点击按钮后把页面参数带到下个页面。这个功能在推广活动页面经常用到，今天我们一起来实现这个功能，接下来我们通过实例去解析。

不过在分享之前，大家可以先去看下这篇文章：

聊聊页面跳转window.location.href与window.open的基本应用和一些区别

讲的是关于页面跳转的基础知识。OK，看完后，我们开始吧。

新建DEMO

我们新建两个页面：1.html和2.html。

我们把1.html当做是推广页面，所以后面会加一些参数，比如：https://www.xxx.com/1.html?utm_source=test1&utm_medium=test2&utm_content=test3&utm_campaign=test4&utm_term=test5，在1.html页面里，我们会加一个按钮或者链接，点击后去2.html。

1.html部分代码：

<a href="javascript://" onClick="activityToAcc();">1</a>

首先我们需要把1.html后面的参数拿到，我们可以通过这个函数去获取：

function getUrlParam(name) {
  var zhengze= new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var para = window.location.search.substr(1).match(zhengze);
  if(para != null){
      return decodeURIComponent(para [2]);  
  }
  return '';
}

调用的话也很简单，比如我想拿到utm_source的参数值，我们可以这样调用：

var utm_source = getUrlParam('utm_source');

然后你可以把utm_source的值拿去应用了。至于拿其他的参数值也是同样的方法。

var utm_source = getUrlParam('utm_source'),
    utm_medium = getUrlParam('utm_medium'),
    utm_content = getUrlParam('utm_content'),
    utm_campaign = getUrlParam('utm_campaign'),
    utm_term = getUrlParam('utm_term');

链接跳转&参数传值

我们在推广页面1.html拿到参数值后，我们需要把他们带到其他页面去，可以这样做了。

定义一个函数

function activityToAcc(){
  window.open('_blank').location="https://www.xxxx.com/login?参数=参数值;
}

大家要注意需求，有的是需要在新页面打开地址的，所以需要设置新开页面跳转。不要在a里面设置target="_blank"，这个会没效果的。这个还不会的，回到上面去看下那篇文章吧。

了解完跳转，我们只要把相关的参数拼接起来就可以了，如下代码：

"https://www.xxxx.com/2.htm?utm_source="+utm_source+"&utm_medium="+utm_medium+"&utm_content="+utm_content+"&utm_campaign="+utm_campaign+'&utm_term='+utm_term

完整的函数定义，可以这样写：

function activityToAcc(){
  window.open('_blank').location="https://www.xxxx.com/2.html?utm_source="+utm_source+"&utm_medium="+utm_medium+"&utm_content="+utm_content+"&utm_campaign="+utm_campaign+'&utm_term='+utm_term;
}

调用函数

调用的话，很简单，如果推广页面1.html有需要调用的，就直接调用：

activityToAcc();

比如：

<a href="javascript://" onClick="activityToAcc();">1</a>

这样，点击后，成功把1.html的参数值，带到2.html里面啦。是不是很简单呢？

总结

在项目中，传递参数有很多种方法，在不同框架里，只是写法不同，但是核心方法一样的。所以只要大家掌握了基础，不管在什么框架里应用，都是游刃有余的。