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

建站交流3年前 (2021-11-15)5450


1、体验应用页面代码:

<template>
  <view>
    <web-view :webview-styles="webviewStyles" src="https://www.mvttw.com"></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*='www.mvttw.com']\").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*='www.mvttw.com']\").parent().hide();"
      );
    });
  },

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

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

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

标签: uniapph5打包

“uniapp应用中使web-view页面(webview)返回上一页+注入js操作页面元素” 的相关文章

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。