解决uniapp使用web-view嵌套H5页面返回直接退出的问题

最新推荐文章于 2025-01-13 16:46:44 发布

叶子CMS

最新推荐文章于 2025-01-13 16:46:44 发布

阅读量2.7k

点赞数 4

文章标签：前端 uni-app javascript

本文链接：https://blog.csdn.net/yezi20189/article/details/128854342

版权

<template>
  <view>
    <web-view :src="src"></web-view>
  </view>
</template>
<script>

var wv; //计划创建的webview
export default {
  data() {
    return {
      src: "",
      canBack: false,
    };
  },
  onBackPress() {
    if (wv && this.canBack) {
      wv.back();
      return true;
    }
    return false;
  },
  onReady() {
    // #ifdef APP-PLUS

    var self = this;
    var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
    setTimeout(function () {
      wv = currentWebview.children()[0];
      wv.addEventListener(
        "progressChanged",
        function (e) {
          wv.canBack(function (e) {
            self.canBack = e.canBack;
          });
        },
        false
      );
    }, 500); //如果是页面初始化调用时，需要延时一下

    // #endif
  },
};
</script>