uni-app中h5页面webview标签地址跳转会干扰h5页面的返回

uni-app中h5页面webview标签地址跳转会干扰h5页面的返回

h5页面中webview标签的地址做了跳转会干扰h5页面的返回

1 回复

更多关于uni-app中h5页面webview标签地址跳转会干扰h5页面的返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，H5页面使用webview标签进行地址跳转时，确实可能会干扰到正常的返回逻辑。这通常是因为webview内部的页面跳转与uni-app框架的页面栈管理不协同导致的。为了解决这个问题，我们可以通过一些编程技巧来确保返回逻辑的正确性。以下是一个可能的解决方案，利用uni-app的生命周期函数和页面栈管理来实现。

解决方案概述

  1. 维护一个自定义的页面栈：用于记录webview中访问的页面地址。
  2. 重写返回逻辑：在uni-app的页面返回事件中，根据自定义页面栈来决定是否执行返回操作。

代码实现

1. 在页面组件中维护一个页面栈

// 在页面的data中定义一个页面栈
data() {
    return {
        webviewStack: [] // 用于存储webview访问的页面地址
    };
},

methods: {
    // 添加页面到栈中
    pushPage(url) {
        this.webviewStack.push(url);
    },
    
    // 从栈中移除当前页面（返回操作）
    popPage() {
        this.webviewStack.pop();
    },
    
    // 检查栈是否为空
    isStackEmpty() {
        return this.webviewStack.length === 0;
    }
}

2. 监听webview的页面变化

// 假设你有一个webview组件，监听其loaded事件
<web-view :src="currentUrl" @loaded="onWebviewLoaded"></web-view>

methods: {
    onWebviewLoaded(event) {
        // 当webview加载新页面时，将新页面地址添加到栈中
        this.pushPage(this.currentUrl);
    },
    
    // 设置当前访问的URL
    setCurrentUrl(url) {
        this.currentUrl = url;
    }
}

3. 重写返回逻辑

// 在uni-app的onBackPress事件中处理返回逻辑
onBackPress(event) {
    if (this.isStackEmpty()) {
        // 如果自定义栈为空，执行默认的返回逻辑（可能退出应用或返回上一原生页面）
        return navigator.back() || false;
    } else {
        // 如果栈不为空，执行自定义的返回逻辑
        this.popPage();
        // 这里可以设置一个逻辑，根据当前栈顶的URL来决定是否加载上一个页面或执行其他操作
        // 例如，如果栈顶是某个特定页面，可以直接加载它
        // this.webview.evalJS(`window.location.href = '${this.webviewStack[this.webviewStack.length - 1]}'`);
        // 或者简单地返回，让webview处理自己的返回逻辑（如果适用）
        return true; // 阻止默认的返回行为
    }
}

以上代码提供了一个基本的框架，用于在uni-app中管理webview的返回逻辑。根据实际需求，你可能需要调整或扩展这些代码，比如处理更多的页面跳转场景或优化性能。

回到顶部