Question

我正在尝试确定缓存（通过applicationCache和HTML5 cache-manifest获得）是否位于不同的域（本地文件系统与WWW）上。

缓存检查资源（网关机制，如果您愿意）位于本地文件系统上，并通过webview加载。这是我无法解决的要求。

直到最近，这个网关本地文件将检查设备是否在线并使用window.location重定向到远程资源，如果设备不在线，它将显示一个图形（也是本地打包的），基本上说＆＃34;您必须连接到互联网才能使用此功能。＆＃34;

但是，我最近刚刚在该远程资源上实现了脱机支持。有用。如果我们让网关文件在离线时重定向到远程资源，它将从缓存加载远程资源。

当用户尚未通过在线访问设备时，用户可能会尝试在离线状态下使用设备，因此需要在网关代码中放置逻辑以测试缓存是否存在。我遇到了跨域问题，这是我预期的，但我不确定如何修复它。

以下是我尝试的代码：

if (window.navigator.onLine === false) {
    // See if we're able to reach the content (if it's cached, we'll get HTML, else it'll fail)
    cacheCheck = $.ajax(contentLoc, {async:false});

    // the request failed so we have no cache at all. let's just show the offline graphic.
    if (cacheCheck.status === 0) { // no cache available :(
        $("#launchpage").addClass("offline");
    } else { // we have a cache :)
        redirect();
    }
} else {
    redirect();
}

当我写这篇文章时，我天真地希望$ .ajax（）会获取缓存版本（如果存在）并且我可以只测试返回的对象以查看返回的状态代码是否为＆＃39 ; t错误状态代码。

但是，这不起作用，因为对象正在返回＆＃34; 错误：NETWORK_ERR：XMLHttpRequest例外101 ＆＃34;

我是否可以使用其他任何方法来确定重定向是否安全？如果重定向失败（由于没有缓存），我需要显示本地图像

Answer 1

我找到了一个解决方法。如果我注入一个指向远程资源的iframe并检查该iframe是否加载HTML（我特意检查该标记是否包含一个清单属性），它会认为该缓存存在并且它可以执行重定向。

如果我没有得到我期望的内容，则会显示错误图形。虽然在我的实现中，图形总是在离线时显示，因为我必须等待iframe异步加载。

以下是使其有效的示例代码：

if (window.navigator.onLine === false) {
// We're offline, so show the offline graphic, in case the future test fails (i.e., no cache available)
    $("#launchpage").addClass("offline");

    // Create an iframe pointing to the canvas. If it loads, we have a cache
    $('body').append('<iframe id="offlineTest" src="'+contentLoc+'" style="display:none;" />');

    $('#offlineTest').bind('load', function() {
        // See if the result HTML tag has a manifest tag.
        manifest = $("#offlineTest").contents().find('html').attr('manifest');

        if (manifest !== undefined) { // cache is available.
            redirect();
        }
    });
} else {
    redirect();
}

检测远程资源的applicationCache可行性

1 个答案: