时间戳

首页 > 解决方案 > 在 iframe 中显示位于 www 文件夹之外的 html 文件——在 InAppBrowser 中工作或解析文本

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

问题描述

我设法使用我构建的自定义插件将一些按需资源下载到我的 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问题

标签： cordovaionic-frameworkhybrid-mobile-appon-demand-resourcesionic-webview

解决方案

我使用 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 问题！

推荐阅读