目前在开发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. QT基础：QMainWindow学习小结

    简述 普通的桌面应用程序有个共同的特性,有菜单栏.工具栏.状态栏.中央窗口等部件.菜单栏其实可以看成是一个窗口,菜单栏中的每一个菜单也可以看成一个窗口,每个部件基本都可以认为是一个窗口.那么这些典型的 ...

  2. CentOS “/lib64/libc.so.6: version `GLIBC_2.14′ not found”系统glibc版本太低

    1.试图运行程序提示”libc.so.6: version `GLIBC_2.14′ not found”,原因是系统的glibc版本太低,软件编译时使用了较高版本的glibc引起的.2.查看系统gl ...

  3. feign的callback设定后，项目启动错误

    错误如下: Error starting ApplicationContext. To display the auto-configuration report re-run your applic ...

  4. C# 调用dephi dll 实例

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Runti ...

  5. 分表需要解决的问题 & 基于MyBatis 的轻量分表落地方案

    分表:垂直拆分.水平拆分 垂直拆分:根据业务将一个表拆分为多个表. 如:将经常和不常访问的字段拆分至不同的表中.由于与业务关系密切,目前的分库分表产品均使用水平拆分方式. 水平拆分:根据分片算法将一个 ...

  6. WPF送走控件的focus方法

    我们可以调用Focus()方法,让WPF控件获得焦点, 那我现在不想要焦点了, 如何把这个包袱抛出去? 可以,  恩, 没有Unfocus(), 但下面的方法也许可行(把焦点抛给另一个不知道的控件): ...

  7. backbone学习笔记：模型（Model）（2）属性验证

    Backbone的属性验证有2种方法: 1.Backbone自带简单的验证方法,但是验证规则需要自己实现 通过validate()方法进行验证,验证规则写在此方法里. var RoomModel = ...

  8. solaris 下查看某程序所开端口

    普通linux机器下可以用netstat -anp | grep pid即可. solaris下则不同,可以借助pfiles工具,pfiles $pid | grep sock pfiles | gr ...

  9. Linux ab 命令

    ab 是一个性能测试工具,用来测试一个页面每秒钟能处理多少HTTP请求 [root@localhost ~]$ yum install -y httpd-tools # 安装ab工具 [root@lo ...

  10. 第二篇：Hadoop 在Ubuntu Kylin系统上的搭建[图解]

    前言 本文介绍如何在Ubuntu Kylin操作系统上搭建Hadoop平台. 配置 1. 操作系统: Ubuntu Kylin 14.04 2. 编程语言: JDK 1.8 3. 通信协议: SSH ...