javascript - 来自 Chrome 打包应用程序中沙盒页面的本地 xmlhttprequest

Question

我有一个打包的应用程序，它将应用程序本地页面嵌入到 iframe 中(以嵌入执行禁止操作的库)。我的沙盒页面想要向相对 URL 发出 xmlhttprequest(因此仍在同一扩展名中)，但它被拒绝并显示以下消息:

XMLHttpRequest cannot load chrome-extension://nilibhiopchihkgnnecfblfjegmogpgn/libs/fonts/miss_fajardose/MissFajardose-Regular.ttf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

说实话，我找到了相关文档:

• http://developer.chrome.com/apps/manifest/sandbox.html

• http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox

  但它们对我来说毫无意义，也许是颜色和 ADD 的混合。

一些上下文:我在 Chrome Web 应用程序和互联网上使用相同的代码，在本例中，我正在加载字体、排版某些内容并计算用于绘制文本轮廓的工具路径。如果该页面是 Chrome 应用程序，则有一个按钮可将其发送到路由器，如果该页面位于网络上，您只能看到刀具路径。

Answer 1

经过大约半天的摸索，这是我发现的最佳解决方法。从沙盒页面，向父级发送消息，要求加载本地文件:

window.top.postMessage({ XMLFile: "levels/foo.xml" }, "*");

在非沙盒页面中，启动文件的异步加载，然后使用文件的字符串版本回调到沙盒页面:

document.body.onload = function() {
    // Listen for request messages from child window
    window.addEventListener("message", function (event) {
        if (event.data.XMLFile) {
            // Load the requested XML file, must be async
            var xhttp = new XMLHttpRequest();

            xhttp.open("GET", event.data.XMLFile, true);
            xhttp.send(null);

            // After loading, pass the resulting XML back down to sandboxed page
            xhttp.onload = function (e) {
                document.getElementById("idSandbox").contentWindow.postMessage({ sResponseText: xhttp.responseText }, '*');
            }
        }
    } );
}

回到沙盒页面，当收到xml响应文本时，将其转换回DOM对象进行解析:

// Receive messages from containing window
window.addEventListener("message", function (event) {
    // XML file retrieved
    if (event.data.sResponseText) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(event.data.sResponseText, "text/xml");

        onAfterLoadLevel(xmlDoc);
    }
});

顺便说一句，whatwg 页面上的颜色混合会触发任何尚未拥有它的人的 ADD。其他引用页毫无用处。关于这个问题有很多讨论，但没有人发布代码，所以我想我应该在这里这样做。