Question

我正在一个项目上工作，为我们的source构建一个React Native应用。我正在使用的功能是能够在连接到Internet时下载内容，然后在未连接到Internet时运行下载的内容。

要下载的内容是运行LMS的网站，所以我不能直接从<WebView />引用下载的HTML文件，因为必须有一个父视图包含一个JavaScript SCORM API。相反，我在<WebView />中引用了以下本地HTML文件：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <title></title>
        <script src="./lib/jquery-1.5.min.js"></script>
        <script src="./lib/PortalAPI.js"></script>
        <script src="./lib/GlobalAPI.js"></script>
        <script src="./lib/Scorm2004DataModel.js"></script>
        <script src="./lib/Scorm2004API.js"></script>
        <script src="./lib/ScormAPI.js"></script>
        <script src="./lib/SimpleAJAX.js"></script>
        <script src="./lib/Common.js"></script>
        <script src="./lib/Common_nw.js"></script>
        <style>
            #lmscontentFrame {
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }
        </style>
    </head>
    <body style="background-color: red;">
        <iframe
            application="yes"
            frameborder="0"
            id="lmscontentFrame"
            name="lmscontentFrame"
            noresize=""
            scrolling="auto"
            src=""
        ></iframe>
    </body>
</html>

上面的HTML文件引用如下：

const scormTrackHtml = require('../files/scormTrack/index.html');
const webView = (
    ...
    <WebView
        source={scormTrackHtml}
        ...
    />
    ...
);

然后，我使用injectedJavaScript的{{1}}属性注入JavaScript，该JavaScript会更改WebView中的src指向下载的内容（例如<iframe /> ）。但是什么也没发生。如果我更改注入的JavaScript以将file:///data/user/0/com.app/files/activity-4260/index.html指向HTTP网站URL，则可以正常工作。我也尝试过删除src前缀，但这只会产生一条file://消息。

现在，如果我将Cannot GET /data/user/0/...文件添加到与上面定义的静态test.html包装HTML文件相同的目录中，并更新注入的JavaScript，将scormTrackHtml设置为{{1}然后加载。因此，src能够加载本地文件，但是我无法确定它是否只是不允许您使用./test.html协议，还是它没有访问权限。 <iframe />目录，如果没有的话，应该放在哪里。

Answer 1

问题归结于文件权限（即，与我的应用捆绑在一起的静态HTML文件不允许引用文件文件夹中的文件）。

部分解决方案是将我与应用程序捆绑在一起的静态HTML文件写入documents目录，以便它与尝试访问的下载内容位于同一位置。这允许<iframe />加载下载的内容，但这只是部分解决方案，因为<iframe />中的内容需要访问父窗口中的SCORM API JavaScript对象，但是Chrome会阻止{{ 1}}使用<iframe />协议，因为跨域安全问题，因此无法访问file://中的变量。

遗憾的是，最终的解决方案似乎是在文档目录中启动静态文件HTTP服务器，因此我可以通过window.parent协议加载内容来解决安全问题。

React Native WebView iFrame参考本地文件

1 个答案: