在 iframe 内显示位于 www 文件夹外的 html 文件——在 InAppBrowser 中工作或解析文本

Question

我设法使用我构建的自定义插件将一些按需资源下载到我的 Cordova 应用程序中。

我现在需要做的是将它们加载到我的应用程序的 iframe 中。这可能吗？？

如果它们位于（唉，只读）www 文件夹中，我可以简单地指向 ${cordova.file.applicationDirectory}/www/game.html
...但是将它们放在库文件夹中（例如，请参见下面的路径）是否有办法在 iframe 中显示它们？
_{('/var/mobile/Library/OnDemandResources/AssetPacks/2F2887A0-7B16-4S5D-83C2-1C588A69DA80/15533301173473852725/com.us-company.sports-beta-enterprise.asset-pack-5a105e8b9d10e3329780d62ea2265d8a.assetpack/game.html' )}

到目前为止，我设法显示它们的唯一方法是：

1. InAppBrowser 使用 cdvfile://localhost 路径（见下文）--> 但我想避免这种情况
_{(cdvfile://localhost/root/Users/user/Library/Developer/CoreSimulator/Devices/D016D3BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11129225-E96A-4BEC-9051-735912378DB0/15538308173473832725/com.us-company-us.sports-beta-enterprise.asset-pack-5a105e8b9d40e1329780d62ea2265d8a.assetpack/flying-block-game.html)}

2. 使用 document.createRange + createContextualFragment 自己解析 html 文本 --> 对于非平凡的游戏来说管理起来变得复杂。

任何帮助在应用程序本身的 iframe 中显示它，以便所有请求都通过 Ionic 引擎并拥有我自己的 iosapp:// 自定义方案而不是 cdvfile://localhost（这可能会导致 CORS 阻塞）?

或者，是否可以使用不同的插件为本地网络服务器提供这些 ODR 下载的文件？

_{_{_{Github issue}}}

Answer 1

我想知道谁强制执行 www 约束，也许这是我可以分叉和更改的东西.. 在那种情况下，我将能够在 ionic-webview 服务的应用程序中嵌入的 iframe 中加载单个游戏，并且更容易解决 CORS 问题，因为我可以依赖我的自定义方案和应用程序域设置为 config.xml 中的首选项.

这是插件代码：

-(NSString *) getStartPath {
    NSString * wwwPath = [[NSBundle mainBundle] pathForResource:@"www" ofType: nil];
    NSUserDefaults* userDefaults = [NSUserDefaults standardUserDefaults];
    NSString * persistedPath = [userDefaults objectForKey:CDV_SERVER_PATH];
    if (![self isDeployDisabled] && ![self isNewBinary] && persistedPath && ![persistedPath isEqualToString:@""]) {
        NSString *libPath = [NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES) objectAtIndex:0];
        NSString * cordovaDataDirectory = [libPath stringByAppendingPathComponent:@"NoCloud"];
        NSString * snapshots = [cordovaDataDirectory stringByAppendingPathComponent:@"ionic_built_snapshots"];
        wwwPath = [snapshots stringByAppendingPathComponent:[persistedPath lastPathComponent]];
    }
    self.basePath = wwwPath;
    return wwwPath;
}

..所以我假设这样的东西应该可以指向下载的游戏 ODR 文件夹：

NSString *odrPath= [[NSBundle mainBundle] pathForResource:@"games" ofType: nil];

不确定同时拥有两个实例运行是否可行..

Cordova slack 频道中的更多讨论点：https://cordova.slack.com/archives/C068CHRJ5/p1586747888233400

Answer 2

我使用 cordova-plugin-ionic-webview 轻松解决了我的问题 window.Ionic.WebView.convertFileSrc:

游戏以这种方式在我的 Cordova 应用程序的 iframe 中正确加载：

var iframe = document.createElement('iframe');
iframe.src = window.Ionic.WebView.convertFileSrc('file:////Users/gsacchi/Library/Developer/CoreSimulator/Devices/D016D2BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11159225-E96A-4BEC-9051-735912378DB0/15538308173473832725/com.company-us.sports-beta-enterprise.asset-pack-5a105e8b9d40e2329780d62ea2265d8a.assetpack/flying-block-game.html');
var target = document.body.appendChild(iframe);

关于 CORS 问题，第三方通常不会将 file:/// 或 localhost 列入白名单，不过好消息是：从 iframe 发出的请求与 App 具有相同的自定义主机名和方案，因此没有 CORS 问题！

Answer 3

如果您已经有了 html 内容，您可以用这种方式设置 iframe 内容，而不是 src="..."，并且您应该能够避免 WkWebView 中的 CORS 问题：

var htmlToWrite = "<html><head></head>" +
    "<body>" +
        "iframe body" +
        "<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
    "</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl.contentWindow.document.open('text/htmlreplace');
frameEl.contentWindow.document.write(htmlToWrite);
frameEl.contentWindow.document.close();

更多上下文：

在 iframe 内显示位于 www 文件夹外的 html 文件——在 InAppBrowser 中工作或解析文本

Display inside an iframe a html file located outside of the www folder -- works in InAppBrowser or parsing the text

cordova

hybrid-mobile-app

ionic-framework

on-demand-resources

ionic-webview