H5获取向下一个页面传值并接收参数

最近在看h5的时候,不但要请求后台数据,前台还要向h5传入参数,刚刚接触h5并不知道怎么办,搜了好久,找到一个简单的方法,先看第一个页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="jssendValue.html? id=1" target="_blank">aaaaaaaaaaa</a>
    </body>
</html>

然后看第二个页面,第二个页面是用来接收第一个页面传过来的参数的:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script language="javascript">
            function getParameter(param) {
                var query = window.location.search; //获取URL地址中?后的所有字符  
                var iLen = param.length; //获取你的参数名称长度  
                var iStart = query.indexOf(param); //获取你该参数名称的其实索引  
                if(iStart == -1) //-1为没有该参数  
                    return "";
                iStart += iLen + 1;
                var iEnd = query.indexOf("&", iStart); //获取第二个参数的其实索引  
                if(iEnd == -1) //只有一个参数  
                    return query.substring(iStart); //获取单个参数的参数值  
                return query.substring(iStart, iEnd); //获取第二个参数的值  
            }

            function init() {
                var param = getParameter("id");
                document.getElementById("a").value = param;
            }
        </script>
    </head>

    <body οnlοad="init()">
        this is a test <br>
        <input id="a" type="text" />
    </body>

</html>

究其原理,其实就是找到"&"这个字符,然后获取符号前后的参数值.可是这只是静态页面之间的传值,虽然这个页面请求了后台,但他并不是动态页面,如何将单纯的h5页面变成动态页面呢,其实这就要牵扯到jsp了,当我们从手机上访问这个h5页面时,我们需要给其中的页面传入对应的参数,否则这个h5页面没有参数无法访问后台并获取数据,当然是用静态页面传值的方法肯定是能够实现的,使用静态页面我们只需要将对应参数拼接在url后面即可,可是如果h5页面比较多的话,这就很麻烦,所以我们选择动态传值,那就是将h5所需要的参数放入map集合中,讲这个集合作为头部添加到url中,请牢记map中的key值,因为在h5页面中获取的时候还要用到。那么,怎么才能在h5页面中获取url头部信息呢:例子如下:

首先在页面最顶部加上下面两句话,就是导入相关工具

 <%@page contentType="text/html" pageEncoding="utf-8"%>
 <%@page import="java.util.*"%>

然后在需要的地方进行获取数据:

var headerId = "<%=request.getHeader("id")%>";
  var headerName = "<%=request.getHeader("name")%>";

这样我们就获取到了前台传入的参数,为了方便使用,我们把它缓存下来,:

localStorage.setItem('userId', headerId);
  localStorage.setItem('userName',headerName);

localStorage是h5的缓存工具。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过以下步骤实现在H5页面缓慢切换下一个页面时保存并播放音乐: 1. 首先,在页面加载时,您可以使用HTML的`<audio>`标签来嵌入音乐文件,并设置其`autoplay`属性为`true`以自动播放音乐。 ```html <audio id="bg-music" src="music.mp3" autoplay loop></audio> ``` 2. 然后,您可以使用JavaScript来控制音乐的播放和暂停。创建一个全局变量来保存音乐的当前状态,并使用事件监听器来处理页面切换时的音乐播放状态。 ```javascript var isMusicPlaying = true; // 音乐播放状态,默认为播放 // 页面加载完成时执行 window.addEventListener('load', function() { var audio = document.getElementById('bg-music'); // 切换页面时执行 window.addEventListener('beforeunload', function() { // 暂停音乐 if (isMusicPlaying) { audio.pause(); } }); // 页面重新加载时执行 window.addEventListener('load', function() { // 恢复音乐播放 if (isMusicPlaying) { audio.play(); } }); }); ``` 3. 最后,您可以添加一个按钮或其他元素来控制音乐的播放和暂停,并更新全局变量`isMusicPlaying`的值。 ```html <button id="music-toggle">切换音乐</button> ``` ```javascript var musicToggle = document.getElementById('music-toggle'); musicToggle.addEventListener('click', function() { var audio = document.getElementById('bg-music'); if (isMusicPlaying) { audio.pause(); isMusicPlaying = false; musicToggle.textContent = '开启音乐'; } else { audio.play(); isMusicPlaying = true; musicToggle.textContent = '关闭音乐'; } }); ``` 通过上述步骤,您可以在H5页面缓慢切换下一个页面时保存并播放音乐,同时提供了一个按钮来切换音乐的播放状态。请注意替换示例中的音乐文件路径和按钮元素的ID,以适应您的实际需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值