适用场景:
当前页面发生了事件,但是需要在另外一个页面进行处理;
条件:
两个页面已经加载完成
例子:
以完成加载父子页面
# 无直接关系,但都已经完成加载的两个不相干的页面
处理方式:
1.自定义触发器
2.evalJS
1.自定义触发器的方式很好用,能够带参并且处理全部都封装在目的页面:
控制页面: mui.fire(targetPage,'customEvent',{//自定义事件参数}); //targetPage:被控制页面
被控制页面: window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容
});
这个是MUI的官方DEMO,【带参】,最重要的是,处理块全部在目的页上,比较好操作,更容易理解.
2.evalJS执行代码块
mui.min.js 封装的JS eval函数,执行小的代码块很方便,但是大得代码块比较难以维护,并且因为代码块和目的代码块分离,如果参入DOM操作,会有比较有繁琐的代码页切换,但是总的来说,做小的处理还是比较方便的:
控制页面处理:
targetPage.evalJS("var tempDom = document.createElement('span');"+
"tempDom.innerHTML = '添加元素';"+
"tempDom.style.color = 'red';"+
"tempDom.style.fontSize = '"+ Math.floor(Math.random()*(40-14)+14) +"px';"+
"document.getElementById('target').appendChild(tempDom);");
可以按照不同的情况,灵活选用不同的处理方式,最终要得一点,无论哪种方式,都要在页面加载完成能够拿到页面操作句柄 WebView[mui.plusReady({//do the thing above here})]之后才能进行的哟 ^_^.
0 个回复