Отображение внутри iframe html-файла, расположенного вне папки www - работает в InAppBrowser или анализирует текст.

Мне удалось загрузить некоторые ресурсы по запросу в мое приложение 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-pack65-5a105e83297sethd62d10e


Единственный способ, которым мне удалось их отобразить, это:

1. InAppBrowser с использованием пути cdvfile://localhost (см. Ниже) ->, но я бы хотел избежать этого
(cdvfile://localhost/root/Users/user/ Библиотека /Developer/CoreSimulator/Devices/D016D3BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11129225-E96A-4BEC-9051-735912378DB0/15538308173473832725-company.us.ua enterprise.asset-pack-5a105e8b9d40e1329780d62ea2265d8a.assetpack / flying-block-game.html)

2. Самостоятельный анализ html-текста с использованием document.createRange + createContextualFragment -> становится сложным в управлении для нетривиальных игр.

Любая помощь отображая это внутри фрейма в самом, так что все запросы идут через двигатель ионического и иметь свой собственный App iosapp:// пользовательские схемы вместо cdvfile: // локального (что, скорее всего, приведет к CORS блокаторов)?

В качестве альтернативы, будет ли он работать с использованием другого плагина для локального веб-сервера, который обслуживает эти загруженные файлы ODR?

Проблема с Github

Источник

2 ответа

Решение

Я легко решил свою проблему с помощью cordova-plugin-ionic-webview's window.Ionic.WebView.convertFileSrc:

Игра правильно загружается внутри iframe в моем приложении Cordova следующим образом:

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, имеют то же настраиваемое имя хоста и схему, что и приложение, поэтому проблем с CORS нет!

Источник

Если у вас уже есть содержимое html, вы можете установить содержимое iframe таким образом, а не src="...", и вы сможете избежать проблем с CORS в WkWebView:

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();

Дополнительный контекст: /questions/35417269/mogut-li-frejmyi-rabotat-v-wkwebview-s-cordova/56589067#56589067

Источник

Интересно, кто применяет ограничение www, может быть, это что-то, что я могу разветвить и изменить... В этом случае я мог бы загружать отдельные игры внутри iframe, встроенного в приложение, обслуживаемое ionic-webview, и более легко решать проблему 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

Источник
Другие вопросы по тегам