目前在开发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. 前端可视化编程：liveReload安装，sublime 3

    需要插件  sublime text3:View in Browser:LiveReload chrome:liveReload 配置方法 一:sublime text3 sublime 3下载地址: ...

  2. python类和模块区别，python命名空间

    在python中,类可以提供模块级别之下的命名空间. 如果一个模块写很多函数,某些函数之间共同完成一组功能,用类会看起来更清晰,在调用时候也会更好,对于ide补全有更小范围的限定提示. 类提供 继承 ...

  3. ASP.NET Web API 使用Swagger使用笔记

    https://www.cnblogs.com/lhbshg/p/8711604.html 最近换了工作,其中Webapi这块没有文档,之前有了解过Swagger借此机会好好整理下常用的地方分享给有需 ...

  4. 一个java程序员的年终总结

    年底了,该给自己写点总结了! 从毕业到现在已经快4年啦,一直在Java的WEB开发行业混迹.我不是牛人,但是自我感觉还算是个合格的程序员,有必要写下自己将近4年来的经历,给自我以提示,给刚入行的朋友提 ...

  5. 使用webbench做压力测试

    Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度.下文介绍的是在Ubu ...

  6. 反射简介—C#特性和反射

    .NET编译器的任务之一就是为所有定义和引用的类型生成元数据描述.除了程序集中标准的元数据外,.NET平台还支持特定(attribute)把更多的元数据嵌入到程序集中. .NET特性扩展了抽象的Sys ...

  7. GC--垃圾收集器

    把周末的文章放在现在才来写,是自己太忙了?还是堕落了? 好吧直接进入主题吧,简单干脆的理解会让自己记忆深刻: 首先说明:GC垃圾收集器关注两件事情: 第一件:查找所有存活对象. 第二件:抛弃死对象(不 ...

  8. IIS 7安装ModSecurity实现WAF功能

    ModSecurity 是一款开源Web应用防火墙,支持Apache/Nginx/IIS,可作为服务器基础安全设施,还是不错的选择. 系统环境:window 2008 R2+IIS 7 0X01 Mo ...

  9. .Net学习心得

      把握自己就是,就是时时拥一颗清澈的心,拥有一片明朗的情怀,缓缓地,从2014的国度里跨进了2015,而我们也就随之告别了2个月的学习之旅,在这里我们拥有了如白色漂渺的梦,黯然升起,在彩色的云霄里飘 ...

  10. Java的Integer和int有什么区别

    Java是面向对象的编程语言,一切都是对象,但是为了编程的方便还是引入了基本数据类型,为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper cla ...