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

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

要回复文章请先登录注册

ccfto

ccfto

回复 你猜我猜不猜 :
还有 ...你的 web.reload() 后 不会报 plus 未定义吗?

我现在用reload() 都是先web.onloaded = function(){
//reload()后面要执行的代码
}
2016-09-10 11:55
ccfto

ccfto

回复 你猜我猜不猜 :
谢谢~ ☺plus.io.resolveLocalFileSystemURL('1/'+id+'.html', function(entry){
cwv.loadURL('1/'+id+'.html');
},function(e){

});
我改这个loadURL时候 先判断 页面存在不了...唯一不爽的就是 打包的时候要勾解压
2016-09-10 11:50
你猜我猜不猜

你猜我猜不猜

回复 ccfto :
document.querySelector('html').addEventListener('tap',function () {
var web = plus.webview.currentWebview().opener();
web.reload();
plus.webview.currentWebview().close();
})
点击错误页面就可以刷新重试,官方给的e的2参数价值不大
2016-08-15 17:21
ccfto

ccfto

回复 DCloud_heavensoft :
大神能看下如果是loadURL 这种错误怎么解决?
2016-08-05 15:03
ccfto

ccfto

标记下~~~
2016-08-05 14:43
珈蓝寺的夜枭

珈蓝寺的夜枭

回复 DCloud_heavensoft :
请问下本地的错误页面,能有错误返回码?自己造一个?请问你实现了么?给我发个看看
2016-03-15 16:44
chender

chender

有iframe的情况,5.0以下的andorid系统,以及ios,就无解了吗?
2016-03-03 17:20
chender

chender

有iframe的情况,5.0以下的andorid系统,以及ios,就无解了吗?
2016-03-03 15:18
as_xfz

as_xfz

同求啊 啊
2016-01-14 09:15
谷震平

谷震平

我的应用也有这个问题,请问产生的原因是什么?
2015-12-15 11:17