uni-app使用webview嵌入H5页面，并控制H5的返回

Myth丶恋晨 2023-01-06 05:46 1103阅读 0赞

## 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;
      }
    };

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

转载：文思齐远博客

发表评论取消回复

表情：

评论列表（有 0 条评论，1103人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5页面计时器

h5页面计时器效果代码效果 ![在这里插入图片描述][70] 代码 <script> function countT

小鱼儿/ 2023年10月18日 09:22/ 0 赞/ 33 阅读

相关 Appium Inspector定位Webview/H5页面元素

目录操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是

一时失言乱红尘/ 2023年10月09日 10:15/ 0 赞/ 22 阅读

相关 uni-app使用webview嵌入H5页面，并控制H5的返回

1、体验应用页面代码： <template> <view> <web-view :webview-styles="webviewSty

Myth丶恋晨/ 2023年01月06日 05:46/ 0 赞/ 1104 阅读

相关 uni-app应用中控制webview的H5页面返回

在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键；要实现这个功能，最主要的是完成应用与H5 的

╰半夏微凉°/ 2022年12月26日 02:22/ 0 赞/ 1061 阅读

相关 uniapp H5 JSSDK封装使用

先看效果吧，封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

朱雀/ 2022年12月20日 05:35/ 0 赞/ 304 阅读

相关 H5 页面写法

1.引入阿里巴巴移动终端框架 flexable.js 2.引入 base.css 3. 使用rem 单位 base.css: html,body,div,

柔光的暖阳◎/ 2022年09月28日 11:37/ 0 赞/ 187 阅读

相关【Uniapp】Uniapp 实现内嵌 H5（webview）提高性能

文章目录 Uniapp 实现内嵌 H5 1、如何内嵌H5 2、内嵌存在问题 3、调用js 4、无法使用缓存

╰半橙微兮°/ 2022年09月02日 13:47/ 0 赞/ 519 阅读

相关 h5页面测试

1. 工具 : 草料二维码当我们写了一个h5页面时,在谷歌浏览器上显示正常，这时我们想在手机上模拟，这时我们可以利用草料二维码. 1.百度草料二维码打开官网，

野性酷女/ 2022年06月16日 08:21/ 0 赞/ 276 阅读

相关 react native利用webView嵌入h5页面以及RN与webView的通信

前言：这边主要是记录下，在react native中如何使用h5页面，以及h5页面发生点击，或者跳转到react native时，如何与react native进行通信。

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 13:40/ 0 赞/ 760 阅读

相关 uniapp h5打包发布

1、在项目的manifest.json中 h5配置,配置页面标题即可 2、hbuilderX中点击发行网站-H5手机版 3、在打包后的文件夹中，命令行输入打开

缺乏、安全感/ 2021年07月24日 12:59/ 0 赞/ 679 阅读