UIWebView. Показываем сайты, документы и просто HTML

Чем нам может помочь UIWebView? Для чего предназначен этот компонент в UIKit? На эти вопросы я постараюсь ответить в этой статье. Расскажу о самых простых методах работы с ним. UIWebView может показывать следующее содержимое:

• Сайты
• Просто HTML
• Документы Microsoft Office, Adobe PDF, Документы Apple iWork
• Медиа-контент

Создание UIWebView

Для начала узнаем, как создать UIWebView. Представим, что мы внутри метода viewDidLoad у UIViewController.

- (void)viewDidLoad

{

    [super viewDidLoad];

    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:webView];

}

В этом примере просто создается UIWebView и показывает белый экран.

Показываем сайт

Чтобы загрузить какой-либо сайт нужно вызвать у UIWebView метод loadRequest:, в него нужно передать NSURLRequest, который в свою учередь создается с помощью NSURL. NSURL содержит в себе URL, который нужно загрузить. Загрузим сайт http://apple.com. Метод viewDidLoad:

- (void)viewDidLoad

{

    [super viewDidLoad];

    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:webView];

    NSURL* url = [NSURL URLWithString:@"http://apple.com"];

    NSURLRequest* request = [NSURLRequest requestWithURL:url];

    [webView loadRequest:request];

}

Обратите внимание, что сайт не вписывается в размеры UIWebView и мультитач-зум на нем не работает. Исправить это можно строчкой:

[webView setScalesPageToFit:YES];

Загрузить сайт можно и другим методом — loadData:MIMEType:textEncodingName:baseURL:. Его следует использовать в случае, если данные с сайта уже получены другим способом и в типе NSData (к примеру через NSURLConnection). Предположим, что у нас уже есть данные с сайта http://apple.com в переменной NSData* data:

[webView loadData:data MIMEType:@"text/html" textEncodingName:@"utf8" baseURL:[NSURL URLWithString:@"http://apple.com"]];

Показываем HTML

Добавим в проект файл с именем file.html и поместим в него следующий HTML-код:

<strong>Привет, Idev.by!</strong>

<p>Это текст из HTML файла</p>

Чтобы показать HTML из этого файла нам нужно загрузить содержимое файла в NSString и поместить в UIWebView:

// узнаем путь к файлу

NSString* filePath = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];

// помещаем в NSString

NSString* html = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

// загружаем в UIWebView содержимое

[webView loadHTMLString:html baseURL:nil];

Показываем документ

Для того, чтобы UIWebView показывал документ не нужно прибегать ни к каким специальным действиям. Просто достаточно загрузить документ в UIWebView. Если документ находиться в интернете нужно просто загрузить его URL (так как мы делали выше с сайтом http://apple.com). Если локально (в проекте) — определить для него локальный URL и загрузить точно так же как и в примере выше. Вот как определить локальный URL:

NSURL* url = [[NSBundle mainBundle] URLForResource:@"имя_документа" withExtension:@"формат"]

Типы документов, которые может отобразить UIWebView:

• Excel (.xls)
• Keynote (.key.zip, .key)
• Numbers (.numbers.zip, .numbers)
• Pages (.pages.zip, .pages)
• PDF (.pdf)
• Powerpoint (.ppt)
• Word (.doc)
• Rich Text Format (.rtf)
• Rich Text Format Directory (.rtfd.zip)

Однако, для отображения документов UIWebView подходит плохо. Лучше для этих целей использовать QLPreviewController или UIDocumentInteractionController (но, они не являются темой данное статьи).

UIWebViewDelegate

UIWebView как и множество других компонентов в UIKit имею делеат. Вот методы, которые можно реализовать:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

- (void)webViewDidStartLoad:(UIWebView *)webView;

- (void)webViewDidFinishLoad:(UIWebView *)webView;

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

Рассмотрим их по-отдельности.

webView:shouldStartLoadWithRequest:navigationType:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

Спрашивает у делегата, можно ли загружать конкретный запрос NSURLRequest в UIWebView. К тому же предоставляется информация о типе перехода UIWebViewNavigationType, переход может быть следующих типов:

• UIWebViewNavigationTypeLinkClicked — пользователь нажал на ссылку
• UIWebViewNavigationTypeFormSubmitted — пользователь отправил форму
• UIWebViewNavigationTypeBackForward — был вызван метод goBack или goForward у UIWebView, в браузере это означает кнопки назад или вперед
• UIWebViewNavigationTypeReload — был вызван метод reload (перезагрузка страницы)
• UIWebViewNavigationTypeFormResubmitted — форма была переотправлена
• UIWebViewNavigationTypeOther — другой вид перехода, который не попадает по выше приведенные критерии

Используя данный метод делегата мы можем проанализировав запрос (точнее его URL) и метод навигации решить — продолжать загрузку либо нет. Если вам не нужна такая проверка — не реализуйте метод, по-умолчанию (если не реализован) он возвращает YES.

webViewDidStartLoad: и webViewDidFinishLoad:

- (void)webViewDidStartLoad:(UIWebView *)webView;

Уведомляет нас о начале загрузки в UIWebView.

- (void)webViewDidFinishLoad:(UIWebView *)webView;

Уведомляет о окончании загрузки.

Используя два этих метода мы можем сделать так, чтобы в status bar появлялся индикатор загрузки, когда UIWebView загружает данные.

- (void)webViewDidStartLoad:(UIWebView *)webView {

    [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:YES];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];

}

Не забудьте установить делегат для UIWebView. Допишите это в метод viewDidLoad нашего UIViewController:

[webView setDelegate:self];

webView:didFailLoadWithError:

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

Уведомляет нас, если возникла ошибка при загрузке. К примеру, мы можем показывать сообщение, если загрузка не удалась:

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {

    UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@"Ошибка!" message:[error localizedDescription] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];

    [alert show];

    [alert release];

}

Замените URL из примера выше на какой-либо несуществующий и загрузите, вы увидите сообщение об ошибке.

Другие полезные методы у UIWebView

UIWebView поддерживает еще некоторое количество других методов и свойств. Рассмотрим их.

• goBack — выполняет переход назад (кнопка «Назад» в браузере)
• goForward — выполняет переход вперед (кнопка «Вперед» в браузере)
• stopLoading — останавливает загрузку данных
• reload — перезагружает страницу в UIWebView
• canGoBack — свойство, показывает можем ли мы перейти назад
• canGoForward — свойство, показывает можем ли мы перейди вперед

Примеры использования данных методов и свойств вы найдете в исходном коде, приложеном к статье. Ссылка будет ниже.

JavaScript

UIWebView может выполнять произвольный JavaScript и возвращать результат выполнения. Для этого существует метод stringByEvaluatingJavaScriptFromString: в который мы передем строку с JavaScript. Например мы можем показать всплывающее сообщение — Alert:

[webView stringByEvaluatingJavaScriptFromString:@"alert('Hello, idev!');"];

В этом примере мы просто показали Alert и не использовали возвращаемое значение. В следующем примере мы запросим ввод данных от пользователя и сохраним его в переменной:

NSString* result = [webView stringByEvaluatingJavaScriptFromString:@"prompt('How are you?')"];

В переменной result будет то, что ввел пользователь.

Нам этом все. В этой статье раскрыта не вся тема о UIWebView, но основные действия мне удалось привести. Сфера применения UIWebView достаточно широка и этот компонент можно использовать в достаточно неожиданных местах.

В приложении находится небольшая программа-браузер, которая демонстрирует работу UIWebView. Загрузить исходники можно тут

Последние статьи