mui---子页面主动调用父页面的方法
我们在做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---子页面主动调用父页面的方法的更多相关文章
- vue：子组件通过调用父组件的方法的方式传参
在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...
- uni-app 子组件如何调用父组件的方法
1.在父组件methods中定义一个方法: changeType:function(type){ this.typeActive = type; alert(type); } 2.在父组件引用子组件时 ...
- layer.open打开iframe页面的调用父页面方法及关闭
//调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面var index = ...
- 【转】C# 子窗体如何调用父窗体的方法
网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法 //FormFather: //需要有一个公共的 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...
- 实现 iframe 子页面调用父页面中的js方法
父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值
<!-- 父页面 --> <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "ht ...
随机推荐
- 系统编码、文件编码与python系统编码
在linux中获取系统编码结果: Windows系统的编码,代码页936表示GBK编码 可以看到linux系统默认使用UTF-8编码,windows默认使用GBK编码.Linux环境下,文件默认使用U ...
- IntelliJ IDEA 2017.3/2018.1激活与汉化
本文以IntelliJ IDEA 2017.3以及2018.1为例进行讲解.(持续更新:2018年5月28日) 适用版本(其它版本未测试): IntelliJ IDEA 2017.2.6.2017.3 ...
- shell脚本死循环检查是否有特定的路由，若存在进行删除操作
while [ 1 ] do tun0_route=`ip route |grep -ci "100.100.80.0"` if [ $tun0_route -eq 0 ];the ...
- 深入分析java线程池的实现原理(转载)
前言 线程是稀缺资源,如果被无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池对线程进行统一分配.调优和监控,有以下好处: 1.降低资源消耗: 2.提高响应速度: 3.提高线程的 ...
- Apache Spark 2.2.0 正式发布
本章内容: 待整理 参考文献: Apache Spark 2.2.0正式发布 Spark Release 2.2.0
- Kubernetes的ConfigMap解析
ConfigMap功能在Kubernetes1.2版本的时候就有了,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.这些配置信息需要与docker image解耦,你总不能每修改一个配置 ...
- [svc]rsync简单部署
安装rsync服务端-backup服务器 yum install rsync -y useradd rsync -s /sbin/nologin -M chown -R rsync.rsync /da ...
- MAC OS X显示.开头的文件_苹果操作系统显示隐藏文件命令
转自:http://dditblog.com/blog_446.html 今天在导入Eclipse项目的时候.发现导入不了.初步估计是因为项目没有.project的文件.在Mac OS X操作系统下面 ...
- adb命令使用总结
1.启动/停止 启动 adb server 命令: adb start-server (一般无需手动执行此命令,在运行 adb 命令时若发现 adb server 没有启动会自动调起.) 停止 adb ...
- iOS中如何创建一个滑出式导航面板(1)
本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...