我們在做APP的時候，很多時候會有這樣的功能需求，例如：登錄，充值，如果登錄成功，或充值成功后，需要更改當前頁面以及父頁面的狀態信息，就會用到在子頁面調用父頁面的方法來實現：在子頁面刷新父頁面的功能。
不多說：看代碼
父頁面：b.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"> <h3>{{message}}</h3> <button @tap="bbbb">改變</button> <ul class="list"> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</li> <li @tap="details">我是新聞動態</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"> function aaaa(){ console.log("我是 aaaa 方法"); }; var main = new Vue({ el: "#main", data: { message:'我是b.html頁面', list:[], }, mounted: function(){ }, watch: {}, methods: { bbbb:function(){ console.log("我是 bbbb 方法"); this.message = "你真的是b.html頁面嗎？"; }, cccc:function(){ console.log("我是 ccc 方法"); }, details:function(){ mui.openWindow({ url:'./b-details.html', id:'b.html', createNew:true, styles:{top:'0px',bottom:'0px'}, show:{autoShow:true,aniShow:'slide-in-bottom',duration:260}, waiting:{autoShow:false,title:'',options:{}} }); }, } }); </script> </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" id="main"> <div class="main-scroll"> <button class="mui-action-back">點擊返回</button> <div>我是新聞動態的詳情</div> <button class="mui-button" @tap="bbbbfun">我是新聞動態</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:[], selfWindow:null, opener:null, }, mounted: function(){ mui.plusReady(()=>{ // this.plus = plus; // var selfWindow = plus.webview.currentWebview(); // var opener = selfWindow.opener(); // opener.evalJS('aaaa()'); // opener.evalJS('main.bbbb()'); // opener.evalJS('main.cccc()'); this.selfWindow = plus.webview.currentWebview(); this.opener = this.selfWindow.opener(); this.opener.evalJS('aaaa()'); this.opener.evalJS('main.bbbb()'); this.opener.evalJS('main.cccc()'); }); }, watch: {}, methods: { // 主動調用父頁面的方法 bbbbfun:function(){ this.opener.evalJS('main.bbbb()'); }, } }); </script> </body> </html>