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

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

要回复文章请先登录注册

苦力强

苦力强

自定义错误页面后,无法返回上一个页面,安卓机按返回键后,连续跳转两个页面,请问此问题如何解决?
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
cyq7on

cyq7on

我都是本地页面
2017-04-04 20:18
cyq7on

cyq7on

同一个页面,我是大部分时候加载正常,但是有时就会这样,真是尴尬
2017-04-04 20:16
卓越

卓越

回复 DCloud_heavensoft :
应用全局错误页面error.html,怎么知道是404,还是500错误
2017-01-23 14:32
Smile_微笑

Smile_微笑

配置的URL应该有问题,路径可能有差错
2016-10-28 19:24
Jauns

Jauns

errorPage: (String 类型 )窗口加载错误时跳转的页面地址
当Webview窗口无法加载指定的url地址时(如本地页面不存在,或者无法访问的网络地址),此时会自动跳转到指定的错误页面地址(仅支持本地页面地址)。
2016-10-26 17:53
啦啦啦啦

啦啦啦啦

小米5手机,对自定义错误页面无法显示啊。。怎么办
2016-09-22 15:59