HTML5，MUI方式页面传值

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

现在提供两种实现方式

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

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

first.html

 

[html] view plain copy
 
  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.                         id: 'id1',     //传往second.html的值  
  25.                         name: 'name2'  //传往second.html的值  
  26.                     });  
  27.                     mui.openWindow({ //目标页面  
  28.                         id: 'second.html',  
  29.                     });  
  30.                 });  
  31.             }  
  32.         </script>  
  33.     </head>  
  34.     <body>  
  35.         <a id="a1">跳转</a>  
  36.     </body>  
  37.   
  38. </html>  

second.html     目标页面

 

 

[html] view plain copy
 
  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

 

[html] view plain copy
 
  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     目标页面

 

 

[html] view plain copy
 
  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>  


 

 

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

posted @ 2017-04-03 18:47  孤舟残月浅笑嫣然  阅读(138)  评论(0)    收藏  举报