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

现在提供两种实现方式

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

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

first.html

  1. <!DOCTYPE html>
  2. <html> 
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <title>HTML5，MUI方式自定义事件页面传值</title>
  8.         <script src="js/mui.min.js"></script>
  9.         <link href="css/mui.min.css" rel="stylesheet" />
  10.         <script type="text/javascript" charset="utf-8">
  11.             mui.init({
  12.                 preloadPages: [{//预加载目标页面
  13.                     'url': 'second.html',
  14.                     'id': 'second.html'
  15.                 }]
  16.             });
  17.             window.onload = function() {
  18.                 var Page = null;
  19.                 document.getElementById("a1").addEventListener('tap', function() {
  20.                     if (!Page) {
  21.                         Page = plus.webview.getWebviewById('second.html');
  22.                     }
  23.                     // mui.fire()方法执行自定义事件,Page是进行预加载后返回的对象，show是目标页的自定义事件
  24.                     mui.fire(Page, 'show', {
  25.                         id: 'id1',     //传往second.html的值
  26.                         name: 'name2'  //传往second.html的值
  27.                     });
  28.                     mui.openWindow({ //目标页面
  29.                         id: 'second.html',
  30.                     });
  31.                 });
  32.             }
  33.         </script>
  34.     </head>
  35.     <body>
  36.         <a id="a1">跳转</a>
  37.     </body> 
  38.  
  39. </html>

second.html     目标页面

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title>HTML5，MUI方式自定义事件页面传值</title>
  7.         <script src="js/mui.min.js"></script>
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script type="text/javascript" charset="utf-8">
  10.              //添加newId自定义事件监听
  11.                 window.addEventListener('show', function(event) {
  12.                     //获得事件参数
  13.                     var id = event.detail.id;
  14.                     var name = event.detail.name;
  15.                     alert(id);
  16.                     alert(name);
  17.                 })
  18.         </script>
  19.     </head>
  20.     <body>
  21.     </body>
  22. </html>
 

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

first.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title>mui页面间传值</title>
  7.         <script src="js/mui.min.js"></script>
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script type="text/javascript" charset="utf-8">
  10.             mui.init();
  11.             var param = { //这是要传的数据
  12.                 userId: 'userId11111111111',
  13.                 toKen: 'toKen',
  14.                 userRole: 'userRole'
  15.             };  
  16.  
  17.             function SendPage(pageId, linkUrl, pageParam) {
  18.                 mui.openWindow({//目标页面
  19.                     url: 'second.html',
  20.                     id: 'second.html',
  21.                     extras: param
  22.                 });
  23.             }
  24.         </script>
  25.     </head>
  26.     <body>
  27.         <a onclick="SendPage()">跳吧</a>
  28.     </body>
  29. </html>

second.html     目标页面

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title></title>
  7.         <script src="js/mui.min.js"></script>
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script type="text/javascript" charset="utf-8">
  10.             mui.plusReady(function() {
  11.                 var self = plus.webview.currentWebview();
  12.                 alert(self.userId);
  13.             });
  14.         </script>
  15.     </head>
  16.     <body>
  17.     </body>
  18. </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. json_decode转码无效

    由于最近从原来常用的utf-8的字符转到了gbk:所以,在用json_decode的时候遇到了返回为空: 经查找发现是json_decode和json_encode只针对utf8字符串有效: 于是用到 ...

  2. coreseek mmseg分词配置和创建

    1.文件格式为 沃尔沃 1x:1现代 1x:1徐工 1x:1住友 1 ... 3.将生成的符合格式要求的词表粘贴到原词表unigram.txt末尾,保存为unigram_new.txt,并拷贝到mms ...

  3. 【BZOJ 1528】 1528: [POI2005]sam-Toy Cars （贪心+堆）

    1528: [POI2005]sam-Toy Cars Description Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Jasio 拿不到 ...

  4. [UOJ407]Werewolf

    题意:给一个无向图和一些询问$(S,E,L,R)$,问能否实现:从$S$出发,经过一些编号$\geq L$的节点后再通过编号$\leq R$的节点到达$E$ 先对每条边$(x,y)$以$\max(x, ...

  5. Problem B: 年龄问题

    #include<stdio.h> int xx(int n,int m,int k) { int a; ) { a=k; } else { a=xx(n-,m,k)+m; } retur ...

  6. ES6 Set结构和Map结构（上）

    Set ES6提供了新的数据结构--Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身也是一个构造函数,用来生成Set数据结构 var s = new Set(); [2,3,5 ...

  7. （转） Unity3D常用代码收集总结

    //创建一个名为"Player"的游戏物体 //并给他添加刚体和立方体碰撞器. player=new GameObject("Player"); player. ...

  8. QS世界大学排名_百度百科

    QS世界大学排名_百度百科 莱斯特大学

  9. sSkinProvider.pas

    unit sSkinProvider;{$I sDefs.inc}{.$DEFINE LOGGED} interface uses Windows, Messages, SysUtils, Class ...

  10. sql server的sql 语句中的列名包含[]时候，把]替换成]]就可以

    sql server的sql 语句中的列名包含[]时候,把]替换成]]就可以eg: create table p.e_LOG_WebServer ( [BSCFlg] int, ), ) ); sel ...