uni-app webview自定义404页面在iOS不显示图片，js不执行

uni-app webview自定义404页面在iOS不显示图片，js不执行

操作步骤：

  • webview配置404页面

预期结果：

  • iOS显示正常，点击按钮发送信息

实际结果：

  • iOS不显示图片，js也不执行

bug描述：

  • 使用webview自定义404页面，按照教程放在hybrid下，安卓正常，iOS不显示图片，js也不执行

| 信息类别         | 信息内容     |
|------------------|--------------|
| 产品分类         | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win64        |
| HBuilderX类型    | 正式         |
| HBuilderX版本号  | 4.0          |
| 手机系统         | iOS          |
| 手机系统版本号    | iOS 14       |
| 手机厂商         | 苹果         |
| 手机机型         | iphone       |
| 页面类型         | vue          |
| vue版本          | vue2         |
| 打包方式         | 离线         |
| 项目创建方式     | HBuilderX    |

更多关于uni-app webview自定义404页面在iOS不显示图片，js不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

24 回复

您好，经过测试无法复现问题，可否提供一下测试工程

更多关于uni-app webview自定义404页面在iOS不显示图片，js不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


回复 [已删除]: 稍等哈，等会我看一下

demo文件

经过排查demo测试工程，发现body上写了style="pointer-events:none"导致body里的所有点击事件都不能触发，把那行删了就好了

不是，这个是我试了以后不生效尝试加的，去掉还是不执行

是在ios断网情况下，打开hbuilde，会显示hybrid里自定义404页面，点击404页面里的’点击发送信息’按钮，在ios上接收不到信息，在安卓正常

回复 [已删除]: 算了，不做了，感觉也解决不了

回复 [已删除]: 不好意思，还是没能复现，理论上断网应该不会影响

回复 JXWang: https://ask.dcloud.net.cn/question/129559

页面

我试了引入图片是可以的，路径用相对路径

是在index.vue页面正常先打开一个webview，比如我demo里的baidu.com,然后断网，再打开页面，这时显示这个404页面，你的图片和js都执行？那你方便把你demo发给我吗

相对路径都试过，我这苹果手机不行

我这边用的是ios16的虚拟机进行测试的，图片能够正常显示，js能正常执行，消息也能正常触发

我是真机，真的不行，

回复 [已删除]: 感谢您的反馈，我进一步排查一下

真机测试

感谢您的反馈，问题已确认，已加分，会在以后的版本修复这个问题。临时解决方案：图片可以转换成base64，外部js直接写在html里

联网以后，webview无法重新加载，尝试了webview.reload和webview.back都不生效

解决了吗现在？ios图片无法正常加载

请问解决了吗，ios自定义404页面无法正常加载图片

回复 前端侠: 兄弟你解决了吗

回复 lishanjun: 兄弟你解决了吗

在 uni-app 中使用 webview 加载自定义的 404 页面时，如果在 iOS 设备上图片不显示且 JavaScript 不执行，可能的原因和解决方法如下：

1. 图片路径问题

在 iOS 设备上，图片路径可能需要使用绝对路径或确保路径正确。相对路径在某些情况下可能会导致图片无法加载。

解决方法：

  • 使用绝对路径加载图片，例如 https://example.com/404.png。
  • 如果图片是本地资源，确保路径正确，并且使用 require 或 @ 符号来引用图片。
<img src="https://example.com/404.png" alt="404 Page">

或者使用本地资源：

<img :src="require('@/static/404.png')" alt="404 Page">

2. JavaScript 执行问题

iOS 的 webview 可能限制了某些 JavaScript 的执行，特别是当页面是通过 file:// 协议加载时。

解决方法：

  • 确保页面是通过 http:// 或 https:// 协议加载的，而不是 file://。
  • 如果页面是本地 HTML 文件，可以将其放在服务器的静态资源目录中，并通过网络请求加载。

3. Webview 配置问题

在 uni-app 中，webview 的配置可能影响页面的加载和 JavaScript 的执行。

解决方法：

  • 确保 webview 的 src 属性正确指向你的 404 页面。
  • 检查 webview 的其他配置项，如 allowFileAccess、allowUniversalAccessFromFileURLs 等，确保它们允许加载外部资源和执行 JavaScript。
<webview :src="webviewUrl" @load="onWebviewLoad"></webview>

export default {
  data() {
    return {
      webviewUrl: 'https://example.com/404.html'
    };
  },
  methods: {
    onWebviewLoad(event) {
      console.log('Webview loaded', event);
    }
  }
};
回到顶部