×

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

作者:Web前端之家2022.07.26来源:Web前端之家浏览:167评论:0
关键词:Javascript
微信公众号

微信公众号

500.jpg

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

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

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

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

新建DEMO

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

image.png

我们把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里面啦。是不是很简单呢?

总结

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

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/jsshili20220726.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

  • 访客

    可以详细解释一下吗...

  • 访客

    厉害了...

  • sasa

    谢谢,刚好遇到,解决了。...

  • steven

    现在不是都在搞windows11了吗?...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2