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

现在提供两种实现方式

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

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

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. go chapter 8 - 初始化对象

    http://blog.haohtml.com/archives/14239 struct定义的属性如果是小写开头的,那么该属性不是public的,不能跨包调用 (implicit assignmen ...

  2. zabbix主机自动发现

    环境说明 角色 主机名 IP zabbix-server c1.heboan.com 192.168.88.1 zabbix-agent c2.heboan.com 192.168.88.2 zabb ...

  3. http://download.eclipse.org/technology/m2e/releases install error

    Can you try running Eclipse as Admin and try this again?. Let me know how that goes. what is the upd ...

  4. .Net中DataGridview数据如何导出到excel表

    首先,这个问题在网上有很多答案,也有很多解决的方法.其次,很多人写过类似的博客 .我的这篇博客,主要是写给那些刚刚接触或接触不久.NET并使用其做程序的人,更是写个自己,记录一下方法,方便以后使用. ...

  5. 【成端更新线段树模板】POJ3468-A Simple Problem with Integers

    http://poj.org/problem?id=3468 _(:зゝ∠)_我又活着回来啦,前段时间太忙了写的题没时间扔上来,以后再说. [问题描述] 成段加某一个值,然后询问区间和. [思路] 讲 ...

  6. 【BFS】POJ3669-Meteor Shower

    [思路] 预处理时先将陨石落到各点的最短时间纪录到数组中,然后在时间允许的范围内进行广搜.一旦到某点永远不会砸到,退出广搜. #include<iostream> #include< ...

  7. List the Books

    描述 Jim is fond of reading books, and he has so many books that sometimes it's hard for him to manage ...

  8. iOS UIPrintInteractionController打印

    - (void)printData{ //为打印做准备,创建一个指向sharedPrintController的引用 UIPrintInteractionController *printer = [ ...

  9. tcpdump的使用

    tcpdump命令的控制分4个部分 控制tcpdump行为 -c 控制抓取报文的个数 -p 非混杂模式 -s 限制报文长度,0 为不限制 -w 保存抓取的报文到指定路径 -r 从pcap报文读取报文 ...

  10. bash中的快捷键使用

    移动 ctrl + xx              光标在行首.位移动 ctrl + 方向左键      光标移动到前一个单词的开始 ctrl + 方向右键      光标移动到后一个单词的开始   ...