iOS端VKWebView无法访问Cordova通过ContentSync下载的HTML文件问题

• VKWebView基于苹果WKWebView内核定制，默认开启严格安全限制，禁止AJAX请求file://协议的本地资源，不会抛出可见错误但会直接拦截请求返回空内容，所以页面显示空白
• 安卓系统WebView默认放开了本地文件跨域访问限制，因此相同代码可以正常运行
• 你使用的jQuery load() 方法本质是发起AJAX请求获取内容再插入DOM，刚好触发了该限制

方案1：读取本地文件内容直接插入DOM 优先推荐 #

兼容性最高，无需修改原生配置。ContentSync通常搭配Cordova/PhoneGap等混合开发环境使用，可搭配File插件直接读取本地HTML文件内容，再插入目标div，绕过AJAX限制，修复后的代码如下：

function startSync() {
    var sync = ContentSync.sync({ src: imageZip, id: 'kittenZip' });

    sync.on('progress', function(data) {
        imageDiv.innerHTML = "<p>Syncing images: "+data.progress + "%</p>";
    });

    sync.on('complete', function(data) {
        console.log(data.localPath);
        // 替换原load方法，用File API读取文件内容绕过AJAX限制
        window.resolveLocalFileSystemURL(data.localPath + "/index.html", function(fileEntry) {
            fileEntry.file(function(file) {
                var reader = new FileReader();
                reader.onloadend = function(e) {
                    // 直接将读取到的HTML内容插入目标div
                    $('#html_div').html(e.target.result);
                };
                reader.readAsText(file);
            }, function(err) {
                console.log("读取文件失败：", err);
            });
        }, function(err) {
            console.log("解析本地路径失败：", err);
        });
    });

    sync.on('error', function(e) {
        console.log('Error: ', e.message);
    });

    sync.on('cancel', function() {
        // 事件取消时的处理逻辑
    }); 
}

方案2：修改VKWebView原生配置 #

仅适用于可控制原生端配置的场景，在VKWebView初始化时添加两项配置即可：

• 开启allowFileAccess权限
• 开启allowFileAccessFromFileURLs权限

方案3：本地HTTP服务代理 #

如果静态资源较多，可在应用内启动一个轻量本地HTTP服务，用http://localhost:端口/的路径访问资源，完全避开file协议的访问限制。

内容的提问来源于stack exchange，提问作者user1882752