uni-app打包的app中使用了webview，但webview中显示的网页如果也使用webview功能会覆盖掉app的页面

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app打包的app中使用了webview，但webview中显示的网页如果也使用webview功能会覆盖掉app的页面

问题描述

  • 我在开发的app中使用webview加载了一个网页地址，（这里的app显示页面称为 appWin吧）
  • webview中的网页是一个游戏启动页面， 当点击启动游戏的时候，会打开一个iframe页面。（这里可以称为win2吧）
  • ifram中的页面地址其实也是uniapp打包的一个h5网页，网页加载了一个游戏窗口，这个窗口也是一个iframe（称为win3吧）

如上所述就出现了类似套娃一样的情况， 现在的bug就是在win3的游戏页面启动的时候。会出现一个覆盖整个appWin的webview页面（显示的是win3的页面内容）。这样就导致前面几层iframe加上的一些红包按钮或者其他fixed布局的按钮都被覆盖了，包括app的状态栏等都被覆盖了。

这个bug只会在安卓的app上出现，我个人理解是这样，由于win3也是uniapp打包的h5，可能中间有判断是安卓系统的时候使用webview会默认显示到最顶部层级，但这样的话就会直接覆盖了appWin。（相当于本来应该是最里面的套娃一下子套住了外面的所有部分）

我现在只能控制appWin的代码， appWin加载的网页是第三方提供的。 这个bug我应该怎么解决。


Harmonyos Next教程
1 回复

在uni-app中嵌入webview时，确实可能会遇到网页内部也使用webview功能导致页面覆盖的问题。这通常是因为网页内部的webview试图接管整个屏幕显示，从而覆盖了uni-app的原生页面。为了解决这个问题，我们可以考虑在uni-app中对嵌入的webview进行一定的限制和管理，确保它不会超出预定的显示范围。

以下是一个基本的代码示例，展示了如何在uni-app中使用webview，并通过设置一些属性来限制其行为：

  1. 在uni-app的页面中嵌入webview：
<template>
  <view class="container">
    <web-view :src="webViewUrl" @loaded="onWebViewLoaded" style="width: 100%; height: 100%;"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://your-webpage-url.com' // 替换为你的网页URL
    };
  },
  methods: {
    onWebViewLoaded() {
      console.log('WebView loaded');
      // 可以在这里添加一些额外的逻辑，比如监听网页内部的事件等
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%; /* 确保webview占满整个容器 */
  overflow: hidden; /* 防止内容溢出 */
}
</style>
  1. 限制网页内部的webview行为：

由于直接控制网页内部的webview行为较为复杂，通常我们需要通过与网页通信的方式来实现。这可以通过postMessage API在uni-app和webview之间进行通信。

例如，在网页中监听来自uni-app的消息，并根据消息内容调整webview的行为：

// 网页中的JavaScript代码
window.addEventListener('message', function(event) {
  if (event.data.type === 'restrictWebview') {
    // 根据收到的消息调整webview行为，例如禁止全屏等
    // 这里只是示例，具体实现取决于网页内部的逻辑
    console.log('Received message to restrict webview behavior:', event.data);
  }
});

在uni-app中发送消息给webview：

methods: {
  sendMessageToWebView() {
    const message = {
      type: 'restrictWebview',
      // 可以添加其他需要的参数
    };
    // 获取webview的引用（这里假设只有一个webview）
    const webViewContext = plus.webview.getWebviewById('webview-id'); // 替换为实际的webview ID
    webViewContext.evalJS(`window.postMessage(${JSON.stringify(message)}, '*');`);
  }
}

注意：上述代码示例中的plus.webview.getWebviewById是HBuilderX特有的API，用于获取webview的引用。在实际应用中，你可能需要根据具体的框架和平台进行调整。此外，确保你的网页已经正确设置了接收和处理postMessage的逻辑。

回到顶部