目前在開發APP的時候，有這樣的一個需求：需要在登錄頁面返回后能夠刷新父頁面。
功能是這樣的：在 A.html頁面有頭像和用戶昵稱，這些信息需要用戶進行登錄才能夠拿到，登錄頁面是在B.html，點擊A.html頁面，跳轉到B.html進行登錄，在B.html登錄成功后返回，返回的時候需要更新A.html的頭像和用戶昵稱。
方法：在B.html頁面點擊返回的時候，觸發A.html頁面的自定義方法來實現。
具體看代碼：項目是用VUE來做的，所以...
B.html ：添加 beforeback方法：
mounted: function(){ mui.init({ beforeback:function(){ var list = plus.webview.getWebviewById('music-index.html'); mui.fire(list,'refresh'); return true; }, }); },
A.html 做接受這個方法，當然這個fire還可以進行傳遞參數
mounted: function() { window.addEventListener('refresh',()=>{ console.log('refresh fun'); this.initialize(); // 具體方法 }); },
簡答示例：a.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="../css/mui.min.css"> <style type="text/css"> *{margin:0px; padding:0px;} div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;} div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll;} ul.list{width: 100%;} ul.list li{width: 100%; line-height: 40px; padding-left: 10px;} </style> </head> <body> <div class="main" id="main"> <div class="main-scroll"> <ul class="list"> <li v-for="x in list" @tap="details">{{x}}</li> </ul> </div> </div> </body> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript" src="../js/mui.min.js"></script> <script type="text/javascript"> var main = new Vue({ el: "#main", data: { list:[], num:0, }, mounted: function() { this.getList(); window.addEventListener('init',()=>{ this.initialize(); // location.reload(); }); }, watch: {}, methods: { initialize:function(){ this.num ++; this.getList(); }, getList:function(){ var lists = []; for(var i=0; i<50; i++){ lists.push("第"+this.num+"個"); }; this.list = lists; }, details:function(){ mui.openWindow({ url:'./a-details.html', id:'a.html', createNew:true, styles:{top:'0px',bottom:'0px'}, show:{autoShow:true,aniShow:'slide-in-bottom',duration:260}, waiting:{autoShow:false,title:'',options:{}} }); }, } }); </script> </html>
跳轉到詳情：a-details.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="../css/mui.css"> <style type="text/css"> div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;} div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll; background:orange;} </style> </head> <body> <div class="main"> <div class="main-scroll"> <button class="mui-action-back">點擊返回</button> </div> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript" src="../js/mui.min.js"></script> <script type="text/javascript"> var main = new Vue({ el: "#main", data: { list:[], }, mounted: function(){ mui.plusReady(()=>{ var selfWindow = plus.webview.currentWebview(); // 如果是固定的跳轉 可以直接返回到固定的頁面 // 如果點擊進來的頁面不固定 需要將點擊來的頁面ID傳遞過來 mui.init({ beforeback:function(){ var parent = plus.webview.getWebviewById('a.html'); // 還可以傳值 mui.fire('home.html','init',{mid:3}); mui.fire(parent,'init'); return true; }, }); }); }, watch: {}, methods: { initialize:function(){ this.getUserInfo(); this.getMusicList(); this.getFigureList(); }, } }); </script> </body> </html>