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

不多说：看代码

父页面：b.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">

        <h3>{{message}}</h3>

        <button @tap="bbbb">改变</button>

        <ul class="list">

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</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">

function aaaa(){

    console.log("我是 aaaa 方法");

};

var main = new Vue({

    el: "#main",

    data: {

        message:'我是b.html页面',

        list:[],

    },

    mounted: function(){

    },

    watch: {},

    methods: {

        bbbb:function(){

            console.log("我是 bbbb 方法");

            this.message = "你真的是b.html页面吗？";

        },

        cccc:function(){

            console.log("我是 ccc 方法");

        },

        details:function(){

            mui.openWindow({

                url:'./b-details.html',

                id:'b.html',

                createNew:true,

                styles:{top:'0px',bottom:'0px'},

                show:{autoShow:true,aniShow:'slide-in-bottom',duration:260},

                waiting:{autoShow:false,title:'',options:{}}

            });

        },

    }

});

</script>

</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" id="main">

    <div class="main-scroll">

        <button class="mui-action-back">点击返回</button>

        <div>我是新闻动态的详情</div>

        <button class="mui-button" @tap="bbbbfun">我是新闻动态</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:[],

        selfWindow:null,

        opener:null,

    },

    mounted: function(){

        mui.plusReady(()=>{

            // this.plus = plus;

            // var selfWindow = plus.webview.currentWebview();

            // var opener = selfWindow.opener();

            // opener.evalJS('aaaa()');

            // opener.evalJS('main.bbbb()');

            // opener.evalJS('main.cccc()');

            this.selfWindow = plus.webview.currentWebview();

            this.opener = this.selfWindow.opener();

            this.opener.evalJS('aaaa()');

            this.opener.evalJS('main.bbbb()');

            this.opener.evalJS('main.cccc()');

        });

    },

    watch: {},

    methods: {

        // 主动调用父页面的方法

        bbbbfun:function(){

            this.opener.evalJS('main.bbbb()');

        },

    }

});

</script>

</body>

</html>

mui---子页面主动调用父页面的方法的更多相关文章

  1. vue：子组件通过调用父组件的方法的方式传参

    在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...

  2. uni-app 子组件如何调用父组件的方法

    1.在父组件methods中定义一个方法: changeType:function(type){ this.typeActive = type; alert(type); } 2.在父组件引用子组件时 ...

  3. layer.open打开iframe页面的调用父页面方法及关闭

    //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面var index = ...

  4. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

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

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

  6. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

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

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

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

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

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

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

随机推荐

  1. How to chain a command after sudo su?

    The idea is simple, for example: alias foo='sudo su foo && cd /tmp' However, it does not exe ...

  2. 在 OC 中调用 Swift 代码

    1.在 Objective-C 项目中使用 Swift 代码 1)在 OC 项目中创建 .Swift 文件,文件中的格式为其本有的格式. 2)Xcode 提示是否创建 Objective-C brid ...

  3. 【转】Extjs2.2.1 DateField 变形的问题解决方案

    <script> //Extjs2.2.1 DateField 变形的问题 // IE Ext.isIE9 = Ext.isIE && navigator.userAgen ...

  4. SNF快速开发平台3.0之--系统里广播的作用--迅速及时、简明扼要的把信息发送给接收者

    广播信息,即速度快捷.迅速及时.简明扼要的把信息发送给接收者. 当然在SNF快速开发平台上你也可以作为公告使用.不管当做什么使用要满足以下需求: 简单操作:页面操作简单 只需要输入内容就可以发送. 灵 ...

  5. unity, 在image effect shader中用_CameraDepthTexture重建世界坐标

    --------------更新 更简单的方法: //depth: raw depth, nonlinear, 0 at near plane, 1 at far plan   float4 scre ...

  6. 物联网架构成长之路(18)-接阿里云OSS服务

    1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 ...

  7. 远程桌面中Tab键不能补全的解决办法

    我们曾在之前的一篇文章中介绍了windows远程连接ubuntu的方法,在成功登陆远程桌面环境之后,发现在终端中Tab键不能自动补齐(但是Ctrl +Tab 可以用,但是需要按下组合键才能补全的话,时 ...

  8. IIS发布的网站常见的问题汇总

    1.安装.NET4.0时缺少WIC导致不能装上.NET4.0,下载安装后即可,下载地址如下,根据系统版本选择对应软件 32位版:https://www.microsoft.com/zh-cn/down ...

  9. 从一道面试题来认识java类加载时机与过程【转】

    说明:本文的内容是看了<深入理解Java虚拟机:JVM高级特性与最佳实践>后为加印象和理解,便记录了重要的内容. 1  开门见山 以前曾经看到过一个java的面试题,当时觉得此题很简单,可 ...

  10. cuda和显卡驱动版本

    TensorFlow安装时需要cuda+对应的显卡驱动.这里给出英伟达官方的cuda和驱动的对应: 地址在这里 然后在这里可下载最新的显卡驱动(英伟达公版的驱动,程序员友好型) 最后说一下我的Tens ...