DCloud_App_Array
DCloud_App_Array
  • 发布:2014-10-20 19:01
  • 更新:1 天前
  • 阅读:50034

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

分类:HTML5+

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

14 关注 分享
Eric_Guo hilongjw DIOGO 开心的哈鲁 龙七 wuweitiandian 疯狂的二进制 wolferhua Trust 水果忍着 BruceAn yydm79687@qq.com 11523110@qq.com 1214835746@qq.com

要回复文章请先登录注册

andy.1in@qq.com

andy.1in@qq.com

nvue配置无效 请修复。
1 天前
1053556058@qq.com

1053556058@qq.com

1111
2021-03-30 17:10
tiandiweb@qq.com

tiandiweb@qq.com

errorPage 根本没有用的呢?我在uni项目里使用
2021-02-04 00:44
tiandiweb@qq.com

tiandiweb@qq.com

回复 DCloud_App_Array :
解压apk修改assets\data\dcloud_error.html后怎么打包成apk呢?
2021-02-04 00:42
小明子

小明子

除了页面找不到,还有其他情况会吗? 目前我测试页面找不到的时候,页面会跳转到error.html。但是 document监听的error事件没有触发。
2020-06-22 16:12
839626987@qq.com

839626987@qq.com

人找资源(外包),前端,熟悉uni、vue,联系wx:Florida_kang
2020-05-07 11:33
kaodeguotechnology@foxmail.com

kaodeguotechnology@foxmail.com

回复 Flickerx :
你好 , 这个问题你解决嘛? 我也遇到同样的问题
2020-05-07 08:58
DCloud_App_Array

DCloud_App_Array (作者)

回复 湖南盛通 :
把apk当做zip解压,在assets\data\dcloud_error.html
2020-04-28 15:01
湖南盛通

湖南盛通

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

1306769296@qq.com

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