uniapp使用web-view嵌入的h5项目，如何让app控制h5返回上一页？

Question

uniapp使用web-view嵌入的h5项目，如何让app控制h5返回上一页？
App有自己的头部导航栏，在左侧有返回上一页的按钮，但在手机上点击返回按钮，h5并没有反应，不能反回上一页，如何能够通过导航返回按钮控制h5返回上一页？

Answer 1

1、可以通过调用uniapp的uni.navigateBack()方法来控制H5页面返回上一页。具体实现步骤如下：

在H5页面中，监听onload事件，将当前页面的url传递给app：

js
window.onload = function() {
  var currentUrl = window.location.href;
  uni.postMessage({
    type: 'currentUrl',
    data: currentUrl
  });
}

2、在uniapp中，监听uni.onNativeMessage事件，接收H5页面发来的消息，获取当前页面的url，并保存在一个数组中。

var urls = []; // 保存H5页面的url
uni.onNativeMessage(function(message) {
  if (message.type === 'currentUrl') {
    urls.push(message.data);
  }
});

3、在uniapp中，通过uni.navigateBack()方法控制返回上一页。当用户点击返回按钮时，先从数组中获取上一个页面的url，然后通过uni.navigateBack()方法返回上一页。

function goBack() {
  urls.pop(); // 删除当前页面的url
  var prevUrl = urls[urls.length - 1]; // 获取上一个页面的url
  if (prevUrl) {
    uni.navigateBack({
      delta: 1,
      success: function() {
        // 向上一页发送消息，通知页面重新加载数据
        uni.postMessage({
          type: 'reload',
          data: prevUrl
        });
      }
    });
  } else {
    // 如果没有上一个页面了，直接关闭当前页面
    uni.navigateBack({
      delta: 1
    });
  }
}

4、在H5页面中，监听uni.onNativeMessage事件，接收来自uniapp的消息，如果收到了reload类型的消息，就重新加载页面数据。

uni.onNativeMessage(function(message) {
  if (message.type === 'reload' && message.data === window.location.href) {
    window.location.reload();
  }
});

这样就可以通过uniapp的头部导航栏返回按钮控制H5页面返回上一页了。