DCloud_App_Array
DCloud_App_Array
  • 发布:2014-10-20 19:01
  • 更新:2024-02-16 13:26
  • 阅读:64925

自定义Webview的404等错误页面,Webview窗口加载页面错误时显示

分类:HTML5+

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

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


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

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

  • 5+App和wap2app
    在应用的manifest.json文件的"plus"->"error"节点的url属性可配置自定义错误页面替换默认的错误页面。
    打开manifest.json文件,切换到代码视图,添加以下数据:

    "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窗口对象会加载错误页面。

15 关注 分享
Eric_Guo hilongjw DIOGO 开心的哈鲁 龙七 wuweitiandian 疯狂的二进制 wolferhua Trust 水果忍着 BruceAn y***@qq.com 1***@qq.com 1***@qq.com s***@163.com

要回复文章请先登录注册

湖南盛通

湖南盛通

我在uniapp中配置自定义error页面遇到一堆问题,其实就是想改下默认样式,能提供官方错误页面的源码吗
2020-04-22 17:05
UNIAPP郭

UNIAPP郭

回复 DCloud_App_Array :
您好,请教一个问题,我现在项目是vue写的,想实现ios侧滑功能,在调用这个方法的时候 plus.webview.create( "url", "id", styles ); ,但是vue里只有一个index,html,这个url的参数我们应该怎么传递呢? 有什么好的实现方案? 盼复 谢谢!
2020-01-16 12:05
DCloud_App_Array

DCloud_App_Array (作者)

回复 liuxy :
uni-app中的web-view组件咱不支持配置单独配置错误页面。
2019-05-20 16:26
liuxy

liuxy

uniapp中监听不到error事件,并且web-view组件不支持errorPage属性,只能配置全局的?
2019-05-20 11:27
李白不白

李白不白

ios 配置无效
2019-04-24 20:22
FanNot凡

FanNot凡

H5 中的 webview 的 src 未完成双向数据绑定 进行页面跳转 导致404 我该如何修改, app 端是可以正常跳转
2019-01-08 10:36
h***@163.com

h***@163.com

怎么做刷新功能,我是线上地址,没网就会走自定义的error.html ,上面我做了个重新加载按钮,怎么实现重新加载打开的网页
2018-11-07 19:22
7***@qq.com

7***@qq.com

马克
2018-10-14 17:18
Flickerx

Flickerx

两个疑问:
1. 自定义错误页面后,怎么做刷新功能(刷新访问不了的页面)?之前用ws.loadURL(e.href),如果没网情况下,点击多次后,e.href连接就是错误页的路径,肯定是不行的。
2. 如何返回到前一页?
2018-09-21 14:24
rexcloud

rexcloud

这个有人做过没?我设置了ios真机怎么没效果。
2018-09-06 17:47