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

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

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页面返回到上一页。

转载请注明出处：文思齐远博客，如果对您有帮助，请喝杯咖啡，谢谢您了！

赏

支付宝打赏

微信打赏

上一篇：重置联通光猫KD-YUN-811G管理员密码桥接到路由器拨号上网

下一篇：全国卫视高清直播软件Android版APP

我要评论

网友评论

评论时间：2021-05-06 11:58:12

大佬，怎么获取web-view history的长度

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的页面，是哪里出了毛病呢

微信扫码给我留言

随机文章

人的悲伤同情悲伤等情绪的发展是（）。

资深的医生，在第一眼接触某一重病患者时，他们会立即感觉到此人的病因、病源所在，而他们下一步的全面检查就会自觉地围绕这些感觉展开。体现了直觉思维的是（）。

1825年（）发生了第一次大规模的金融危机。

全世界第一所具有充分学术自由空气的大学是().

下面哪一项是1992年以后经济增长率总体稳步上升的一个重要原因？（）

以下哪个选项不是不相干谬误？（）

热评文章

禁止系统自动更新Windows Update Blocker v1.5 汉化版

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

“鹰有时飞的比鸡还低，但鸡却没有飞到鹰那么高”是谁的名言？（）

重置联通光猫KD-YUN-811G管理员密码桥接到路由器拨号上网

kindeditor-plus

kindeditor自定义添加网络视频插件，修改批量图片上传方式flash为h5