目前在开发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. 通过phoenix在hbase上创建二级索引，Secondary Indexing

    环境描述: 操作系统版本:CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 phoenix版本:phoenix-4.10.0 hbase版本: ...

  2. c#中如何退出程序后自动重新启动程序

    //触发退出程序事件 private void button1_Click(object sender, EventArgs e)        {             Application.E ...

  3. Java压缩包解压到指定文件

    在获得一个以Zip格式压缩的文件之后,需要将其进行解压缩,还原成压缩前的文件.若是使用Java自带的压缩工具包来实现解压缩文件到指定文件夹的功能,因为jdk提供的zip只能按UTF-8格式处理,而Wi ...

  4. Dubbo -- 系统学习 笔记 -- 示例 -- 启动时检查

    示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 启动时检查 Dubbo缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止Spring初始化完成,以便上线时,能及早发 ...

  5. C++ mysql 乱码

    C++读mysql数据库中的中文显示出来的是乱码 在连接到数据库后加上这么一句 mysql_query(pMYSQL, "SET NAMES GB2312"); 或者 mysql_ ...

  6. IDEA maven项目下测试mybatis例子，使用mappper class或package引入mapper映射文件，总是报错Invalid bound statement（所有配置完全正确）

    困扰几个小时,终于查到解决办法及原因(可以直接到最后看解决方案) 环境就是用IDEA搭建的maven项目,主要jar包引入配置如下 <dependencies> <dependenc ...

  7. ch3：文件处理与异常

    如何从文件读入数据? python中的基本输入机制是基于行的: python中标准的“打开-处理-关闭”代码: the_file=open('文件全称') #处理文件中的数据 the_file.clo ...

  8. Python 管理 MySQL

    Python MySQLdb 模块 Python pymysql 模块 Python SQLAlchemy 模块 Python ConfigParser 模块 Python 创建 MySQL 配置文件 ...

  9. 使用 requests 维持会话

    什么是 Cookie 和 Session: 简单来说,我们访问每一个互联网页面,都是通过 HTTP 协议进行的,而 HTTP 协议是一个无状态协议,所谓的无状态协议即无法维持会话之间的状态.比如,仅使 ...

  10. 由于OBJ模型的读取引起的Release无问题Debug卡死问题

    有些时候会遇到Release版本正常运行,但是Debug无法运行甚至崩溃,原因有很多种,这里记录一下由于模型文件读取引起的Debug问题. 项目中需要读取一个obj模型文件,30M左右,Debug模式 ...