目前在开发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. geoserver 添加图层数据

    1.添加shapefile文件 首先到http://www2.census.gov/geo/tiger/TIGER2011/CONCITY/上下载名称为tl_2011_47_concity的shape ...

  2. pyCharm运行python提示“please select a valid interpreter”

    报错信息“please select a valid interpreter”提示“请选择一个有效的解释器” pyCharm是编写python语言的集成IDE工具,安装pyCharm后需要自行安装py ...

  3. nginx配置http协议和tcp协议配置文件案例

    注意 nginx 1.9版本之后才支持 tcp #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/e ...

  4. Tree Recovery(前序中序求后序)

    Tree Recovery Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14640   Accepted: 9091 De ...

  5. Python 爬虫系列：糗事百科最热段子

    1.获取糗事百科url http://www.qiushibaike.com/hot/page/2/    末尾2指第2页 2.分析页面,找到段子部分的位置, 需要一点CSS和HTML的知识 3.编写 ...

  6. 文件完整性hash验证demo（python脚本）

    一个简单的文件完整性hash验证脚本 #!/usr/bin/env python # -*- coding: utf- -*- import os import hashlib import json ...

  7. Django 定义数据模型

    如何定义数据模型: (1) 在 MVC 设计模式中,M 表示数据模型 ( Model ),负责业务对象与数据库的映射,我们可以通过应用的 models.py 来定义数据模型(2) Model 采用了 ...

  8. Selenium 获取节点信息

    Selenium 可以通过 find_element() 找到指定的节点,Selenium 也提供了相关的方法和属性来直接提取节点信息,如属性.文本等 from selenium import web ...

  9. 使用 urllib 处理 Cookies 信息

    如何获取 Cookies : import urllib.request import http.cookiejar cookies = http.cookiejar.CookieJar() # 先声 ...

  10. 使用css制作倒影

    -webkit-mask 这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间. -webkit-mask让为一个元素添加蒙板成为可能,从而 ...