uni-app webview嵌套H5，H5内进行页面跳转后，点击导航栏左上角返回按钮返回的是webview的上一页，而非h5内跳转的上一页

在uni-app中使用webview嵌套H5页面时，确实可能会遇到导航栏返回按钮行为不符合预期的问题。默认情况下，uni-app的导航栏返回按钮会触发整个webview的返回事件，而不是H5页面内的返回逻辑。为了解决这个问题，我们可以通过自定义返回按钮的行为来实现H5页面内的返回功能。

以下是一个基本的解决方案，涉及到在H5页面和uni-app之间进行通信，以控制返回按钮的行为。

1. 在H5页面中添加返回逻辑

首先，在H5页面的JavaScript代码中，我们需要管理页面的历史记录，并在页面跳转时更新这些信息。

// H5页面中的JavaScript代码
let historyStack = [];

function pushHistory(page) {
    historyStack.push(page);
}

function popHistory() {
    if (historyStack.length > 1) {
        historyStack.pop();
        window.location.href = historyStack[historyStack.length - 1];
    } else {
        // 如果只剩一个页面，则不做任何操作或者执行其他逻辑
    }
}

// 在页面加载时调用
window.onload = function() {
    // 假设当前页面URL为当前页面的标识
    pushHistory(window.location.href);
};

// 在页面跳转时调用
function navigateTo(url) {
    window.location.href = url;
    pushHistory(url);
}

2. 在uni-app中自定义返回按钮行为

接下来，在uni-app中，我们需要监听返回按钮的点击事件，并通过postMessage将事件传递给H5页面，让H5页面自行处理返回逻辑。

// 在uni-app的页面脚本中
onBackPress(event) {
    if (event.from === 'navigateBack') {
        // 通过webview的evalJS方法调用H5页面的popHistory函数
        this.$refs.webview.evalJS(`popHistory();`);
        return true; // 阻止默认的返回行为
    }
    return false; // 执行默认的返回行为
}

3. 在uni-app的模板中配置webview

确保你的webview组件正确配置，并且ref属性已设置，以便在脚本中引用。

<template>
    <view>
        <web-view ref="webview" src="https://your-h5-page-url.com"></web-view>
    </view>
</template>

总结

通过上述步骤，我们实现了在uni-app中使用webview嵌套H5页面时，点击导航栏返回按钮能够返回H5页面内的上一页，而不是整个webview的上一页。这种方法依赖于H5页面和uni-app之间的通信，以及H5页面内部对历史记录的管理。