如何实现webview组件里的网页后退一步

分类：uni-app

返回按键 Webview uniapp

如何实现监听手机返回按钮，实现webview组件里的网页后退一步而非app后退一步？

<template>  
    <view class="content">  
        <view class="h5games">  
            <web-view ref="webView" src="https://ask.dcloud.net.cn/"></web-view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        methods: {  

        },  
        mounted() {  

        },  

        onBackPress(e) {  
            const _this = this;  
            if (e.from === 'backbutton') {  
                return true  
            }  
        }  

    }  
</script>

2024-04-09 10:23 负责人:无分享

1 个回复

JXWang

可是使用nvue实现，体验会更好，可参考以下代码

<template>  
    <view class="content" >  
            <web-view ref="webView" src="https://ask.dcloud.net.cn/" :style="`height: ${webViewHeight}px`"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                webViewHeight: 0,  
            }  
        },  
        onReady() {  
            const windowInfo = uni.getWindowInfo();  
            this.webViewHeight = windowInfo.windowHeight - windowInfo.statusBarHeight;  
        },  
        onBackPress(e) {  
            if (e.from === 'backbutton') {  
                this.$refs.webView.evalJs("history.back();");  
                return true  
            }  
        }  
    }  
</script>

要回复问题请先登录或注册

如何实现webview组件里的网页后退一步

1 个回复

公告

相关问题

如何实现webview组件里的网页后退一步

与内容相关的链接

1 个回复

公告

相关问题