uniapp使web-view页面(webview)返回上一页+注入js操作页面元素

1、页面代码:

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

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

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*='xxx.cn']\").parent().hide();"
      );
    });
  },

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

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

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