目前在开发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>

mui---子页面调用父页面的自定义方法的更多相关文章

  1. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  2. 实现 iframe 子页面调用父页面中的js方法

    父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...

  3. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  4. 如何通过js在子页面调用父页面元素的click事件

    //获取父页面的某个元素var node = window.parent.document.getElementById("btnReturn");//调用该元素的Click事件 ...

  5. iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）

    父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...

  6. iframe子页面调用父页面js函数

    window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document). ...

  7. mui---子页面主动调用父页面的方法

    我们在做APP的时候,很多时候会有这样的功能需求,例如:登录,充值,如果登录成功,或充值成功后,需要更改当前页面以及父页面的状态信息,就会用到在子页面调用父页面的方法来实现:在子页面刷新父页面的功能. ...

  8. iframe页面调用父窗口JS函数

    A页面iframe 页面B, 此时 如果要在B页面调用父页面A的函数 B页面写法 parent.functionName(); 错误1: 解决办法 var js_domain_async = 'bai ...

  9. easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    <!-- 父页面 --> <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "ht ...

随机推荐

  1. python中如何将字符串连接在一起，多倍的字符串如何输出

    说明: 在python中,如果有多个字符串,想要连接在一起,或者说想要拼接在一起该如何操作,在此记录下. 操作过程: 1.通过 + 这个加号操作符,将字符串拼接在一起 >>> &qu ...

  2. Owe Her

    I owe her too much a wedding, i think i never pay her for it a life,

  3. [原]unity3d之http多线程异步资源下载

    郑重声明:转载请注明出处 U_探索 本文诞生于乐元素面试过程,被面试官问到AssetBundle多线程异步下载时,愣了半天,同样也被深深的鄙视一回(做了3年多u3d 这个都没用过),所以发誓要实现出来 ...

  4. 8 -- 深入使用Spring -- 2...5 Spring 3.0 新增的注解

    8.2.5 Spring 3.0 新增的注解 @DependsOn @Lazy @DependsOn :用于强制初始化其他Bean.修饰Bean类或方法,可以指定一个字符串数组作为参数,每个数组元素对 ...

  5. RabbitMQ :VHost,Exchanges, Queues,Bindings and Channels

    和RabbitMQ这个项目的缘分好奇怪,很长一段时间内是只关注源代码,真的是Erlang开源项目中的典范;现在要在项目中应用RabbitMQ,从新的视角切入,全新的感觉.仿佛旧情人换了新衣,虽是熟稔却 ...

  6. Empire安装和试用

    Empire2.0,powershell后渗透利器的安装和试用 https://www.restkhz.com/2017/05/empire-test/ 使用Empire“探索”Windows个人电脑 ...

  7. mysql类型对应Java的类型

    整型 JDBCtinyint         java.lang.Integersmallintmediumint       java.lang.Longint          bigint    ...

  8. mkubimage-mlc2: error while loading shared libraries: liblzo2.so.2: cannot open shared object file: No such file or directory

    mkubimage-mlc2: error while loading shared libraries: liblzo2.so.2: cannot open shared object file: ...

  9. es 5.0的下载安装for mac

    为了学习es的同学少走些弯路,特此记下笔记,以供学习. 我装的es是5.4.3 一,下载安装es, 1,es 5.0之后变化很大,对jdk要求为1.8,(先升级jdk) 2,下载地址 :https:/ ...

  10. 音频——H5 audio

    分享站又有新功能了:将文件站上的语音文件正确播放出来.效果图: 暂停: 播放: 实现的效果:类似于音乐播放器一般,但是较之更简单一些,可以正常播放语音,有拖动.快进后退效果便可. 思路: 首先想到的便 ...