uni-app使用webview嵌入H5页面，并控制H5的返回

最新推荐文章于 2025-06-10 15:19:56 发布

吃饭睡觉才是快乐人生

最新推荐文章于 2025-06-10 15:19:56 发布

阅读量5.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： uni-app爬坑中文章标签： uni-app

原文链接：https://i847.cn/article/4851.html

uni-app爬坑中专栏收录该内容

2 篇文章

订阅专栏

博客围绕uni-app展开，包含应用页面代码体验及解析。解析部分涉及获取页面webview对象，监听其加载完成事件并注入js代码隐藏元素，还重写app返回事件，使app返回时触发webview页面返回上一页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、体验应用页面代码：

<template>
  <view>
    <web-view :webview-styles="webviewStyles" src="https://movie.i847.cn"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewStyles: {
        progress: {
          color: "#0bbe06"
        }
      }
    };
  },
  onReady() {
    var currentWebview = this.$scope.$getAppWebview().children()[0];
    currentWebview.addEventListener("loaded", function() {
      currentWebview.evalJS(
        "$(\"ul.fed-part-rows a[href*='resource.i847.cn']\").parent().hide();"
      );
    });
  },
  onBackPress(e) {
    this.$scope
      .$getAppWebview()
      .children()[0]
      .back();
    return true;
  }
};

2、代码解析：

var currentWebview = this.$scope.$getAppWebview().children()[0];

获取页面webview对象。

onReady() {
    var currentWebview = this.$scope.$getAppWebview().children()[0];
    currentWebview.addEventListener("loaded", function() {
      currentWebview.evalJS(
        "$(\"ul.fed-part-rows a[href*='resource.i847.cn']\").parent().hide();"
      );
    });
  },

监听webview页面加载完成事件，每次加载或跳转页面后都会执行，这里监听完成后给页面注入了一段js代码来隐藏元素。

  onBackPress(e) {
    this.$scope
      .$getAppWebview()
      .children()[0]
      .back();
    return true;
  },

重写app返回事件，让app返回时触发webview页面返回到上一页。

转载：文思齐远博客