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

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

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

随机文章

由市场配置资源意味着 ()。

谁是雅虎现任的CEO？（）

（）强调，我们党90多年的历史，是党领导中国人民不断赢得革命、建设、改革胜利的历史，也是党不断实现、保持、发展自己先进性和纯洁性的历史。

“我的主人公常常做着我不愿意他们做的事情”，这句话出自（）。

（）是庄子对墨子的评价。

为了增加宝贝在淘宝搜索中的曝光量，以下哪些方式是错误的？（）。

热评文章

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

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

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

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

kindeditor-plus

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