DCloud_App_Array
DCloud_App_Array
  • 发布:2014-10-20 19:01
  • 更新:2026-01-09 14:13
  • 阅读:70914

自定义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

要回复文章请先登录注册

李白不白

李白不白

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
苦力强

苦力强

自定义错误页面后,无法返回上一个页面,安卓机按返回键后,连续跳转两个页面,请问此问题如何解决?
2018-01-10 10:19
BruceAn

BruceAn

如果能够定义超时时间就好了。
2017-12-25 17:52
BruceAn

BruceAn

WebView的open或者loadUrl方法能否指定额外的request请求的header参数?有时候需要打开服务端的页面,所以需要header里面有一些特定值。
2017-10-27 14:34
c***@qq.com

c***@qq.com

为什么我离线打包出来的页面error事件捕捉不到?而且打印出来的error页面地址竟然是http://localhost:13131的网络地址,什么鬼?
2017-05-25 17:26