html退回父页面,MUI-返回到首页（任意的父级页面）并刷新（或做其他操作）

关于如何返回到首页(任意的父级页面)可以参考《MUI-返回到首页(任意的父级页面)》这篇文章。本文主要讲解如何刷新页面(或对页面做其他操作)，并在【返回到首页(任意的父级页面)】功能的基础上扩展刷新(或做其他操作)功能。

原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/b1c464619b2d

如何刷新页面？

刷新页面的方式有两种：一种是整体刷新，一种是局部刷新。下面将逐一介绍。

整体刷新

整体刷新就是重新加载页面，一般会出现闪烁，用户体验不好。可以通过5+给页面对象提供的reload方法实现:

//需要刷新的页面的id

var pageId = "test.html";

//根据页面id获取页面

var page = plus.webview.getWebviewById(pageId);

//刷新页面

page.reload();

局部刷新(或其他操作)

局部刷新是对页面的局部进行调整(使用js代码增加标签、删除标签或者修改标签展示的内容)。这种方式一般不会出现闪烁，用户体验好。但是实现相对麻烦一点(需要在准备刷新的页面中添加自定义事件，巧妙的是自定义事件不止可以做刷新，还可以做其他操作)，可以通过MUI提供的自定义事件分两步实现：

第一步，监听自定义事件(添加自定义事件)：在目标页面(准备刷新的页面)中添加如下代码来监听自定义事件：

window.addEventListener('customEvent',function(event){

//通过event.detail可获得传递过来的参数内容

console.log("触发了customEvent事件，参数内容："+JSON.stringify(event.detail));

//在此处添加要刷新的内容(或其他操作)

});

第二步，触发自定义事件：通过mui.fire(target,event,data)方法触发目标页面的自定义事件，其中target是目标页面对象、event是自定义事件名称、data是json格式的数据(对应上面监听自定义事件中的event.detail)。假设目标页面的id为"targetPage.html",可以通过下面的代码触发目标页面的自定义事件：

var targetPage = plus.webview.getWebviewById("targetPage.html");

mui.fire(targetPage, "customEvent", {content:"触发了自定义事件"});

通过上面两步(触发事件后)，打印的日志如下：

[LOG] : 触发了customEvent事件，参数内容：{"content":"触发了自定义事件"}

给【返回到首页(任意的父级页面)】扩展刷新(或做其他操作)功能

接来下把上面研究的两种刷新方式扩展到【返回到首页(任意的父级页面)】功能中，考虑到我们可能会同时使用全局刷新和局部刷新于是把他们扩展到同一个方法中(当然，也可以不刷新，或者选择其中任意一种刷新方式)。具体实现是给popToTarget(targetId)方法扩展三个参数：

isReload，是否让目标页面执行reload方法刷新(全局刷新);

eventName，自定义事件名称，如果存在，就触发(可以实现局部刷新，也可以做其他操作)；

data，json格式的数据(自定事件参数)。

代码如下：

/**

* 从当前页面pop到目标页面

* @param {String} targetId 目标页面ID

* @param {Boolean} isReload 是否让目标页面执行reload方法刷新(全局刷新)

* @param {String} eventName 自定义事件名称，如果存在，就触发(可以实现局部刷新)

* @param {Object} data json格式的数据(自定事件参数)

*/

function popToTarget(targetId, isReload, eventName, data){

//获取目标页面

var target = plus.webview.getWebviewById(targetId);

if (!target) {

console.log("目标页面不存在！");

return;

}

//获取当前页面

var current = plus.webview.currentWebview();

if (current === target) {

console.log("目标页面是当前页面！");

return;

}

//将要关闭的页面

var pages = new Array(current);

//父级页面

var opener = current.opener();

while (opener){

if (opener === target) {//找到了目标页面

//是否需要触发目标页面的自定义事件

if (eventName) {

if (isReload) {//全局刷新和局部刷新(自定义事件)同时存在

//在全局刷新完成之后再触发目标页面的自定义事件

target.onloaded = function(){

mui.fire(target, eventName, data);

};

} else {

mui.fire(target, eventName, data);

}

}

//是否需要全局刷新目标页面

if (isReload) {

target.reload();

}

//关闭目标页面的所有子级页面pages

pages.map(function(page){

page.close();

});

return;

}

pages.push(opener);

opener = opener.opener();

}

//没有找到目标页面

console.log("目标页面不是当前页面的祖先！");

}

封装到plus.common.js中

为了方便以后使用，将其封装到plus.common.js中，以后再有类似对5+功能的封装都可以并到这个js文件中，在使用的地方引入这个文件，就可以不用再写上面重复的代码啦。封装后的js文件内容如下：

//5+功能封装

var plusCommon = {

/**

* 从当前页面pop到目标页面

* @param {String} targetId 目标页面ID

* @param {Boolean} isReload 是否让目标页面执行reload方法刷新(全局刷新)

* @param {String} eventName 自定义事件名称，如果存在，就触发(可以实现局部刷新)

* @param {Object} data json格式的数据(自定事件参数)

*/

popToTarget:function(targetId, isReload, eventName, data){

//获取目标页面

var target = plus.webview.getWebviewById(targetId);

if (!target) {

console.log("目标页面不存在！");

return;

}

//获取当前页面

var current = plus.webview.currentWebview();

if (current === target) {

console.log("目标页面是当前页面！");

return;

}

//将要关闭的页面

var pages = new Array(current);

//父级页面

var opener = current.opener();

while (opener){

if (opener === target) {//找到了目标页面

//是否需要触发目标页面的自定义事件

if (eventName) {

if (isReload) {//全局刷新和局部刷新(自定义事件)同时存在

//在全局刷新完成之后再触发目标页面的自定义事件

target.onloaded = function(){

mui.fire(target, eventName, data);

};

} else {

mui.fire(target, eventName, data);

}

}

//是否需要全局刷新目标页面

if (isReload) {

target.reload();

}

//关闭目标页面的所有子级页面pages

pages.map(function(page){

page.close();

});

return;

}

pages.push(opener);

opener = opener.opener();

}

//没有找到目标页面

console.log("目标页面不是当前页面的祖先！");

}

}

使用方法

在使用之前先引入plus.common.js文件，然后可以有四种方式返回到目标页面：

第一种，直接返回到目标页面不做任何刷新：

plusCommon.popToTarget(targetId);

第二种，返回到目标页面后做全局刷新：

plusCommon.popToTarget(targetId, true);

第三种，返回到目标页面后做触发自定义事件(自定义事件中可以做局部刷新，也可以做其他操作)：

plusCommon.popToTarget(targetId, false, "customEvent", {key:value});

第四种，返回到目标页面后即要做全局刷新也要触发自定义事件(自定义事件中可以做局部刷新，也可以做其他操作)：

plusCommon.popToTarget(targetId, true, "customEvent", {key:value});