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

发布时间:2020-07-11 21:42:52 作者:Mos 阅读量:1959

体验应用:847影视安卓版847影视苹果版

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

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

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

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

转载请注明出处:文思齐远博客,如果对您有帮助,请帮忙点一下右侧的广告,谢谢您了!
支付宝打赏 微信打赏

我要评论

网友评论


Mos

评论时间:2020-09-27 13:06:59

关于返回不到原来的uni页面,提供一种思路:可以试一试在onBackPress里面判断webview页面的history的长度,如果存在hostory再back,不存在就作不处理。


欢迎解决的了来评论一下。


linke

评论时间:2020-09-18 15:43:46

内部确实可以跳转,不过返回不到原来的uni页面


评论时间:2020-09-18 15:37:00

返回不了最初的uni页面


评论时间:2020-09-18 15:36:20

webview内部可以跳转,但是返回不到最初的uni的页面,是哪里出了毛病呢

猜你想搜

实时天气

©2020 i847.cn
部分内容转自网络,如有损害您的权益,致邮联系:jiang2008wen#126.com,一经证实,立即删除!    我要留言
备案号:蜀ICP备18020563号-1