在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应用程序中.
I managed to download some On-Demand Resources into my Cordova App using a custom plugin that I built.
我现在需要做的是将它们加载到我的App的iframe中.这可能吗?
What I need to do now is load them inside an iframe in my App. Is this possible??
如果它们位于(叹气，只读)www文件夹中，我可以简单地指向${cordova.file.applicationDirectory}/www/game.html
...但是将它们放在库"文件夹中(例如，请参见下面的路径)是否可以在iframe中显示它们?
('/var/mobile/Library/OnDemandResources/AssetPacks/2F2887A0-7B16-4S5D-83C2-1C588A69DA80/15533301173473852852/com.us-company.sports-beta-enterprise.asset-pack-5a105e8b9d10e3329780d62ea/game.html')
If they were located in the (sigh, read-only) www folder I could simply point to ${cordova.file.applicationDirectory}/www/game.html
...but being them in the Library folder (eg. see path below) is there a way to display them inside an 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 ->对于非平凡的游戏来说，管理起来变得很复杂.
The only way I managed to display them so far is:
1. InAppBrowser using a cdvfile://localhost path (see below) --> but I would like to avoid this
(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. Parsing the html text myself using document.createRange + createContextualFragment --> becomes complex to manage for non-trivial games.
任何帮助在应用本身的iframe中显示此内容的方法，以便所有请求都通过Ionic引擎并具有我自己的 iosapp://自定义方案，而不是 cdvfile://localhost (这可能会导致CORS拦截器)?
Any help displaying this inside an iframe in the App itself so that all requests go through the Ionic engine and have my own iosapp:// custom scheme instead of cdvfile://localhost (that will likely result in CORS blockers)?
或者，它可以为服务那些ODR下载文件的本地网络服务器使用其他插件吗?
In alternative, would it work using a different plugin for a local webserver that serves those ODR downloaded files?
Github issue
推荐答案
我很容易使用cordova-plugin-ionic-webview的window.Ionic.WebView.convertFileSrc解决了问题:
I easily fixed my problem using cordova-plugin-ionic-webview's window.Ionic.WebView.convertFileSrc:
通过这种方式，游戏可以在我的Cordova应用程序的iframe中正确加载:
The game loads correctly inside an iframe in my Cordova App in this way:
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问题！
Regarding CORS issues, third parties usually don't whitelist file:/// or localhost, the good news though is that: the requests going out from the iframe have the same custom hostname and scheme as the App so there are no CORS issues!
这篇关于在iframe中显示位于www文件夹之外的html文件-在InAppBrowser中工作或解析文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
