点击第一个页面的标签，跳转到第二个页面，把第一个页面的值也传往目标页面

现在提供两种实现方式

注意：需要在手机运行才可以，用电脑浏览器可能不支持。

第一种方式  页面已创建，通过自定义事件传值

first.html

<!DOCTYPE html>

<html> 

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>HTML5，MUI方式自定义事件页面传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.init({

                preloadPages: [{//预加载目标页面

                    'url': 'second.html',

                    'id': 'second.html'

                }]

            });

            window.onload = function() {

                var Page = null;

                document.getElementById("a1").addEventListener('tap', function() {

                    if (!Page) {

                        Page = plus.webview.getWebviewById('second.html');

                    }

                    // mui.fire()方法执行自定义事件,Page是进行预加载后返回的对象，show是目标页的自定义事件

                    mui.fire(Page, 'show', {

                        id: 'id1',     //传往second.html的值

                        name: 'name2'  //传往second.html的值

                    });

                    mui.openWindow({ //目标页面

                        id: 'second.html',

                    });

                });

            }

        </script>

    </head>

    <body>

        <a id="a1">跳转</a>

    </body> 

</html>

second.html     目标页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>HTML5，MUI方式自定义事件页面传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

             //添加newId自定义事件监听

                window.addEventListener('show', function(event) {

                    //获得事件参数

                    var id = event.detail.id;

                    var name = event.detail.name;

                    alert(id);

                    alert(name);

                })

        </script>

    </head>

    <body>

    </body>

</html>
 

第二种方式     页面初始化时，通过扩展参数传值；

first.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>mui页面间传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.init();

            var param = { //这是要传的数据

                userId: 'userId11111111111',

                toKen: 'toKen',

                userRole: 'userRole'

            };  

            function SendPage(pageId, linkUrl, pageParam) {

                mui.openWindow({//目标页面

                    url: 'second.html',

                    id: 'second.html',

                    extras: param

                });

            }

        </script>

    </head>

    <body>

        <a onclick="SendPage()">跳吧</a>

    </body>

</html>

second.html     目标页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.plusReady(function() {

                var self = plus.webview.currentWebview();

                alert(self.userId);

            });

        </script>

    </head>

    <body>

    </body>

</html>
 

mui 页面传值的更多相关文章

  1. MUI 页面传值 webview

    我们假设a.html 和b.html a.html 页面代码 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. mui页面传值

    以下代码全部在script标签内 一.通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效): mui.openWi ...

  3. MUI 页面传值，因为用的是H5+ plus方法所以要在真机上才能测试出效果

    页面a.html <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  4. 【转】Hbuilder MUI 页面刷新及页面传值问题

    文章来源:http://www.111cn.net/sys/CentOS/67213.htm 一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面 ...

  5. MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  6. 关于MUI页面之间传值以及刷新的问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  7. mui框架开发aop的跨页面传值

    mui开发跨平台app,其实不乏会涉及到跨页面传值,今天给大家简单介绍一种常用也是简单的传值方法 咱在这里设置一个场景,就是两个页面进入到同一页面展示不同的元素,此时需要在这两个页面各自设置一个区别的 ...

  8. Hbuilder MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  9. ASP.NET MVC 5 Web编程5 -- 页面传值的方式

    本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(Controller向View传值):前端向后端传值(View向Controller传值):Action与Action之间的传值. 回顾 ...

随机推荐

  1. scrapy抓取拉勾网职位信息（四）——对字段进行提取

    上一篇中已经分析了详情页的url规则,并且对items.py文件进行了编写,定义了我们需要提取的字段,本篇将具体的items字段提取出来 这里主要是涉及到选择器的一些用法,如果不是很熟,可以参考:sc ...

  2. 【大杀器】利用划分树秒杀区间内第k大的数

    最近看了一道题,大概就是给出一个序列,不断询问其子区间内第k大的数,下面是个截图 绕了一圈没找到中文版题目,if(你是大佬) then 去看截图:else{我来解释:给出一个整数n,和一个整数m,分别 ...

  3. 【BZOJ 4567】【SCOI 2016】背单词

    http://www.lydsy.com/JudgeOnline/problem.php?id=4567 贪心. 任何不用第一种情况的方案吃的泡椒数都小于\(n^2\),所以最小泡椒数的方案一定不包含 ...

  4. hdu 2955 Robberies（概率背包）

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. 【找规律】【递归】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem F. Doubling

    题意: 给你一个n,问你R(n)对应的字符串长度最小的是啥. dp打个表出来,f(i)表示i值对应的字符串的最小长度,发现f(1)=1,f(2)=2,其他的情况下,若是偶数,则恰好在其外面加一对中括号 ...

  6. JS的scrollIntoView学习

    scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶 ...

  7. 万里长征第二步——django个人博客（第三步 —— 设置一些全局变量）

    可以将一些全局变量设置在settingg.py里 #网站的基本信息配置 SITE_NAME = 'John的个人博客' SITE_DESC = '专注学习Python开发,欢迎和大家交流' WEIBO ...

  8. 面经 | 我是如何通过校招拿到京东的Offer的

    本文来自粉丝投稿,原作者:红鼻子熊. 版权归Hollis所有. OFFER:京东2018校招物流研发岗 个人:211小硕 面试时间:2017年秋天 整体:三轮面试,前两轮为技术面试,最后为hr面试 一 ...

  9. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  10. 用google mock模拟C++对象

    google mock是用来配合google test对C++项目做单元测试的.它依赖于googletest(参见我上篇文章<如何用googletest写单元测试>: http://blo ...