0

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

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

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


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

1. InAppBrowser使用cdvfile://localhost路径（见下文）--> 但我想避免这种情况
（cdvfile://localhost/root/Users/user/库/开发者/CoreSimulator/设备/D016D3BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11129225-E96A-4BEC-9051-735912378DB0/15538308173473832725/com.us-company-us-company- enterprise.asset-pack-5a105e8b9d40e1329780d62ea2265d8a.assetpack/flying-block-game.html) 2. 自己使用document.createRange + createContextualFragment

解析 html 文本--> 对于非平凡的游戏来说管理起来很复杂。

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

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

                                                                                                Github问题

4

3 回答 3

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 问题！

于 2020-04-14T17:01:11.993 回答
1

如果你已经有 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();

更多上下文：https ://stackoverflow.com/a/65132249/5669636

于 2020-12-03T19:18:58.163 回答
0

我想知道谁强制执行 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 s​​lack 频道中的更多讨论点：https ://cordova.slack.com/archives/C068CHRJ5/p1586747888233400

于 2020-04-13T20:27:55.103 回答