【报Bug】uni-app ios自定义404错误页面,图片和文件加载失败

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 11 家庭中文版-21H2-22000.613

HBuilderX类型：正式

HBuilderX版本号： 3.8.4

手机系统： iOS

手机系统版本号： iOS 16

手机厂商：苹果

手机机型： iPad(第八代)和苹果手机(12mini)都有此问题

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <meta charset="utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title>错误页面</title>  
        <style>  
            .noData {  
                width: 100%;  
                height: 100%;  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                flex-direction: column;  
                padding-top: 20%;  
            }  

            .noData .image {  
                width: 180px;  
                height: 150px;  
            }  

            .noData .content {  
                width: 95%;  
                margin: auto;  
                display: flex;  
                align-items: center;  
                flex-direction: column;  
                justify-content: center;  
                letter-spacing: 1px;  
                margin-top: 30px;  
            }  

            .content .title {  
                font-size: 18px;  
            }  

            .content .desc {  
                font-size: 14px;  
                margin-top: 30px;  
                max-width: 70%;  
                word-wrap: break-word;  
            }  

            .content .btn {  
                padding: 10px 20px;  
                color: #868d91;  
                font-size: 13px;  
                margin-top: 30px;  
                border-radius: 36px;  
                border: 1px solid #d4d4d4;  
            }  

            .content .btn::after {  
                border: none;  
            }  

            .logo {  
                position: absolute;  
                right: 15px;  
                top: 15px;  
                width: 30px;  
                height: 30px;  
            }  
        </style>  
    </head>  
    <body>  
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>  
        <!-- uni 的 SDK -->  
        <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->  
        <script type="text/javascript" src="js/uni.webview.1.5.4.js"></script>  
        <div class="noData hideToShow" style="backgroundColor: #ffffff">  
            <div class="image">  
                <img style="width: 100%;height: 100%;" src="img/noNetWork.png"></img>  
            </div>  
            <div class="content">  
                <text class="title" style="color: #373a40">网络或程序错误</text>  
                <text class="desc" style="color: #8b8b8b">请检查一下网络情况或点击刷新试试</text>  
                <span id="errUrl" class="desc" style="color: #8b8b8b"></span>  
                <button class="btn" type="default" onclick="setting(true)">刷新试试</button>  
            </div>  
            <div id="logo" class="logo" @longtap="openSettingUrl">  
                <img style="width: 100%;height: 100%;" src="img/logo.png"></img>  
            </div>  
        </div>  
        <script>  
            var url = "",  
                href = "";  
            // 获取错误信息  
            document.addEventListener("error", function(e) {  
                url = e.url; // 错误页面的url地址  
                href = e.href; // 错误页面的完整路径（包括完整的协议头）  
                console.log("href------", href, e)  
                document.getElementById("errUrl").innerHTML = href;  
            }, false);  

            function setting() {  
                uni.webView.postMessage({  
                    data: {  
                        type: "PageError",  
                        url: url,  
                        href: href  
                    }  
                });  
            }  

            var timeOutEvent;  
            $("#logo").on({  
                touchstart: function(e) {  
                    // 长按事件触发    
                    timeOutEvent = setTimeout(function() {  
                        timeOutEvent = 0;  
                        alert('你长按了');  
                    }, 600);  
                    //长按400毫秒     
                    // e.preventDefault();      
                },  
                touchmove: function() {  
                    clearTimeout(timeOutEvent);  
                    timeOutEvent = 0;  
                },  
                touchend: function() {  
                    clearTimeout(timeOutEvent);  
                    if (timeOutEvent != 0) {  
                        // 点击事件    
                        // location.href = '/a/live-rooms.html';    
                        // alert('你点击了');  
                    }  
                    return false;  
                }  
            })  
        </script>  
    </body>  
</html>

操作步骤：

嵌入webview页面,之后断网,再点击页面中的访问按钮,就会加载错误页面,ios加载的错误页面不能正常使用,安卓完全没问题

预期结果：

加载的错误页面能正常执行

实际结果：

图片加载失败,js不能正常执行

bug描述：

配置错误页面后,安卓手机html正常显示, 图片也是正常,js执行正常。但是ios只是在错误页面能加载进来，里面引入的js代码都不能执行，图片也不能正常加载

<script type="text/javascript" src="js/uni.webview.1.5.4.js"></script>  
<img style="width: 100%;height: 100%;" src="img/logo.png"></img>  

// 两种方式都不行  
<script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>  
<img style="width: 100%;height: 100%;" src="./img/logo.png"></img>