mui开发APP中子页面操作父页面的方式总结。

mui开发APP过程中学习使用滑动切换底部选项卡时遇到一个问题，底部选项卡和头部是在父页面，其中有四个子页面是底部选项卡对应的四个窗口页面，但是在子页面打开一个新webview页面时发现打不开，甚至还出现即使打开了，父页面还在，毕竟是在子页面操作的，所以父页面存在也合理，所以就需要在子页面来操作父页面。

当然，发现在子窗口页面中打开新页面的方式最简单的就是就是top方式，这样新的webview页面就会沾满整个窗口，父页面被遮住。

top.mui.openWindow(url)

如果想在子页面来操作父页面，又该用什么方法呢？那就是evalJS，需要配合一个触发事件比如点击才能执行。

直接用下面的代码演示，都是亲自测试过完全可以用的，案例中使用了hcoder的h.js，也可以不用，h.js最大的好处就是简化了对dome页面的操作，可以说是小型的jQuery吧，我是特别喜欢用的。

案例中是子页面在执行完向左滑动后，修改父窗口页面的底部选项卡的状态和头部的title文字内容。

<script src="js/mui.min.js"></script>
	<script src="js/libs/h.js"></script>
	<script>
		
		mui.init({
			
			preloadPages:[{
			  url: 'parcar-search.html',
		      id : 'parcar-search.html'
		    }]
		});
		var _self, _next, timer;
			mui.plusReady(function(){
			    _self = plus.webview.currentWebview();
			    _next = plus.webview.getWebviewById('sub2.html');
			    index = plus.webview.getWebviewById('index.html');
			    _self.drag(
			        {
			            direction : "left",
			            moveMode  :　"followFinger"
			        },
			        {
			            view　        :　_next,
			            moveMode  : "follow"
			        },
			        function(e){
			            if(e.type == 'end' && e.result){						            
			                index.evalJS("h('#tabBar').find('a').removeClass('mui-active'); h('#navBarSecond').addClass('mui-active');h('#title').html('提货派车');");
			            };
			        }
			    );
			});

其重点理解evalJS的内容，index.evalJS是指在父窗口页面下执行evalJS，执行哪些动作就是自己定义的啦，案例是添加和删除了class和修改title的文字innerHTML

index.evalJS

这是目前我用到的子页面操作父页面的最佳方式，也欢迎留言说车其它更好的方式。

来源：CSDN

作者：well2049

链接：https://blog.csdn.net/well2049/article/details/69499644