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

现在提供两种实现方式

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

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

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. AndroidManifest.xml文件详解（application）

    http://blog.csdn.net/think_soft/article/details/7557101 语法(SYNATX): <application android:allowTas ...

  2. 洛谷——P3908 异或之和

    P3908 异或之和 题目描述 求1 \bigoplus 2 \bigoplus\cdots\bigoplus N1⨁2⨁⋯⨁N 的值. A \bigoplus BA⨁B 即AA , BB 按位异或. ...

  3. 1.L 查询关键字 HEXLOC

    Take the compile listing for the program that has either OFFSET or LIST option selected. Use the OFF ...

  4. Java中Object的方法

    构造方法摘要Object()           方法摘要protected Object clone()           创建并返回此对象的一个副本.boolean equals(Object ...

  5. asp总结

    什么是ASP.NET? ASP.NET是.NET FrameWork的一部分,是一项微软公司的技术,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,它可以在通过HTTP请求文档时再在W ...

  6. [BZOJ 3140] 消毒

    Link: BZOJ 3140 传送门 Solution: 挺好的一道暴力题 首先发现可以每次贪心选择宽度为1的一面,即$1*x*y,1*x*z,1*y*z$ 那么对于与该面垂直的面,相当于解决了一行 ...

  7. 【贪心】【线性基】bzoj2460 [BeiJing2011]元素

    题意:让你求一些数在XOR下的带权极大无关组. 带权极大无关组可以用贪心,将这些数按权值从大到小排序之后,依次检验其与之前的数是否全都线性无关.可以用线性基来搞. 可以用拟阵严格证明,不过也可以脑补一 ...

  8. ACM/CF赛制getstart模板

    (包含整型变量快速读入.简易循环和连续容器的迭代器循环的宏定义.调试时的运行时间输出(编译选项应有“DEBUG”宏定义)等)  1 /*================================ ...

  9. Nginx 重定向 伪静态 rewrite index.php

    参考https://www.kancloud.cn/manual/thinkphp5/177576 thinkphp入口文件同目录下添加.把下面的内容保存为.htaccess文件 <IfModu ...

  10. maven 创建web工程，spring配置文件找不到!

    公司项目用的maven,在启动服务器的时候,出现上面的错误,然后找到WEB-INF下面的web.xml,给classPath加上*号,解决!