uni-app自定义Webview的404等错误页面，Webview窗口加载页面错误时显示

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

uni-app自定义Webview的404等错误页面，Webview窗口加载页面错误时显示

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-webview-error

当Webview窗口加载错误地址（如本地页面不存在）或者访问网络资源失败（如无法访问网络）时会自动显示默认错误页面：

error-image

可以通过以下方法自定义Webview的404等错误页面。

设置应用全局默认错误页面

5+App和wap2app

在应用的manifest.json文件的"plus"->"error"节点的url属性可配置自定义错误页面替换默认的错误页面。

"plus": {  
    "error": {  
        "url": "error.html"  
    },  
    //...  
},  
//...

其中url地址推荐使用本地地址，相对于应用根目录。 设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。

uni-app项目

"app-plus": {  
    "error": {  
        "url": "hybrid/html/error.html"  
    },  
    //...  
},  
//...

error.html需要放到根目录下的hybrid/html目录下，否则不会被编译进去

单独设置Webview窗口的错误页面

如果需要单独自定义某个Webview窗口的错误页面，则需要在创建时通过WebviewStyle对象的errorPage属性控制:

var styles = {errorPage:"error.html"}; // 设置为“none”则关闭此Webview窗口的跳转到错误页面功能  
var webview = plus.webview.create( "url", "id", styles );     
webview.show();

错误页面中监听事件

在定义的error.html页面中可以通过监听"error"事件获取更多错误信息：

// 获取错误信息  
document.addEventListener("error",function(e){  
    var url = e.url;  // 错误页面的url地址  
    var href = e.href; // 错误页面的完整路径（包括完整的协议头）  
},false);

注意 Android平台使用iframe时如果无法加载页面在不同版本系统上存在差异：

  • 5.0及以上版本：Webview窗口对象不会加载错误页面，仅iframe节点显示无法加载页面；
  • 5.0以下版本：Webview窗口对象会加载错误页面。

Harmonyos Next教程
1 回复

在uni-app中，自定义Webview组件的错误页面（如404页面）可以通过监听页面的加载状态以及错误事件来实现。当Webview组件加载页面失败时，可以显示一个自定义的错误页面。以下是一个示例代码，展示了如何实现这一功能。

首先，确保你的uni-app项目中已经引入了Webview组件。

1. 在页面中添加Webview组件

在你的页面（例如pages/webview/webview.vue）中，添加Webview组件，并绑定相关事件：

<template>
  <view>
    <web-view 
      :src="webviewSrc" 
      @loaded="onLoaded" 
      @error="onError"
      style="width: 100%; height: 100%;"
    ></web-view>
    <!-- 自定义错误页面 -->
    <view v-if="showErrorPage" class="error-page">
      <text>页面加载失败</text>
      <text>请检查您的网络连接或URL是否正确</text>
      <!-- 可以添加更多错误提示信息或按钮 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewSrc: 'https://example.com', // 要加载的URL
      showErrorPage: false, // 控制是否显示错误页面
    };
  },
  methods: {
    onLoaded() {
      console.log('页面加载成功');
      this.showErrorPage = false; // 页面加载成功时隐藏错误页面
    },
    onError(e) {
      console.error('页面加载失败', e);
      this.showErrorPage = true; // 页面加载失败时显示错误页面
    },
  },
};
</script>

<style>
.error-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  text-align: center;
}
</style>

2. 注意事项

  • webviewSrc 是你要加载的URL，可以根据实际需求动态设置。
  • onLoaded 方法在页面加载成功时被调用，用于隐藏错误页面。
  • onError 方法在页面加载失败时被调用，用于显示错误页面。你可以根据需要扩展这个方法，例如记录错误信息或尝试重新加载页面。
  • 错误页面样式可以根据实际需求进行调整，这里只是一个简单的示例。

通过这种方式，你可以在uni-app中实现自定义的Webview错误页面，提高用户体验。

回到顶部