Проблема

При работе с приложением Cordova Hybrid (приложение Cordova, заключенное в тонкий слой собственного пользовательского интерфейса), которое использует плагин Ionic Web View в качестве WebView, от клиента требовалось иметь встроенную кнопку, которая будет загружать локальное тестирование. html в основном WebView.

Изменение основного URL-адреса WebView в ответ на собственную кнопку требует редактирования файла MainViewController.m, который является основным представлением, в котором находится WebView, и где мы можем найти его ссылку: self.webViewEngine.

Наш VC self.webViewEngine предоставляет loadRequest метод, который мы можем вызвать для загрузки любого URL-адреса, разрешенного с помощью тега allow-navigation в config.xml. Следовательно, вызов loadRequest с помощью @"test.html" должен быть довольно простым, верно? Не совсем. Загрузка @"test.html" покажет белый экран без ошибок, даже если файл существует в папке www рядом с index.html.

Итак, следуя моему обязательству вести блог о том, на что у меня уходит больше получаса, вы читаете этот пост, который, надеюсь, сэкономит вам время.

Причина

Согласно документации Ionic, Ionic Web View использует локальный HTTP-сервер для обслуживания локальных файлов, включая главный index.html. Это отличается от Cordova WebView по умолчанию, который загружает index.html с file:/// протоколом. Под капотом механизм Ionic Web View добавляет обработку настраиваемой схемы URL-адресов ionic://, используя WKURLSchemeHandler WKWebView.

Существует некоторая хитрая логика, которая заключается в разрешении различных протоколов URL, включая замену протокола file:///. Итак, чтобы получить доступ к локальным файлам, которые находятся в нашей www папке, мы будем использовать этот ionic:// протокол напрямую.

Решение

Вот как загрузить test.html в основной Ionic Web View (который, в свою очередь, может загружать любой локальный JS / CSS / другой ресурс). Вы можете использовать этот код в MainViewController.m в проекте XCode.

NSURL *url = [NSURL URLWithString:@"ionic://localhost/test.html"]

NSURLRequest* appReq = [
    NSURLRequest requestWithURL:url 
    cachePolicy:NSURLRequestUseProtocolCachePolicy 
    timeoutInterval:20.0
    ];

[self.webViewEngine loadRequest:appReq];

Мы создаем NSURL, который указывает на ionic://localhost/test.html, затем создаем NSURLRequest с этим URL и таймаутом в 20 секунд, а затем вызываем метод loadRequest из self.webViewEngine (унаследованный от CDVViewController).

Теперь ваш новый URL-адрес должен загрузиться в WebView!

Первоначально опубликовано на https://www.learningsomethingnew.com.