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

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

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管理员密码桥接到路由器拨号上网

下一篇：下列选项中，谁写作了《江州司马青衫泪》？（）

我要评论

网友评论

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

随机文章

中国的自卫反击战,它是在我国的自卫型的国防的类型情况之下，受到了侵犯和欺负，在忍无可忍情况之下我国进行的（）反击。

下面关于陈寅格描述不正确的一项是：（）

除了机会和资源，创业的关键要素还包括（）。

我们对音乐的审美价值判断受到下列哪一项因素的决定：（）

葡萄牙民间节日大部分集中在()。

（）是病症观察应该做的第一步。

热评文章

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

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

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

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

kindeditor-plus

( )是古今中外最伟大的兵家泰斗。