Ein WebView-Element ist eine schnelle und einfache Art, sowohl plattformunabhängige als auch dynamische Inhalte in eine gewöhnliche iOS App zu integrieren. Nun ist es nicht schwierig, das WebView-Element zu benutzen, um Webseiten anzuzeigen, aber die Dinge werden komplizierter, wenn eine Interaktion zwischen der Parent App und der Webseite erforderlich ist. Im Moment gibt es keinen gangbaren Weg für eine Webseite, Nachrichten an den WebView Controller zu senden. Dieser Artikel zeigt, wie man trotz dieser fehlenden Funktion eine Zwei-Wege-Kommunikation implementieren kann. Am Ende des Artikels finden Sie einen Download-Link zu einem vollständigen iOS Beispielprojekt.

JavaScript Code von Ihrer App aus aufrufen

Dieser Teil ist einfach: Nehmen wir an, in Ihrem Projekt benutzen Sie ein WebView-Element für die Anzeige der Seiten. Es gibt eine Methode namens stringByEvaluatingJavaScriptFromString, die die gewünschte Funktionalität bereitstellt. Beispiel:

[myWebView stringByEvaluatingJavaScriptFromString:@"alert('Hello World!');"];

Diese Methode – Sie ahnen es – zeigt eine Warnmeldung, die von Ihrer Webseite geschickt wurde. Auf diese Weise können Sie alle JavaScript-Funktionen aufrufen, die Ihrer Webseite von außen zur Verfügung stehen. Damit ist es ein Kinderspiel, Seiten ohne großen Aufwand zu ändern.

In Ihrer App Funktionen vom WebView-Element aus aufrufen

Der umgekehrte Weg ist weitaus komplizierter. Wir müssen eine Methode finden, wie eine Webseite mit einer App kommunizieren kann. Glücklicherweise bietet das WebView-Element einige hilfreiche Attribute und Ereignisse. Zunächst einmal wird ein Ereignis namens shouldStartLoadWithRequest ausgelöst, wenn eine Seite angefordert wird. Hier ist ein Beispiel für die Implementierung:

-(BOOL)myWebView:(UIWebView*)myWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNaviagtionType)navigationType {
   [...]
}

Was diese Funktion so interessant macht ist, dass sie aufgerufen wird, bevor die Seite tatsächlich geladen wird, und dass sie einen booleschen Wert als Rückgabe erwartet. Der Rückgabewert YES veranlasst das WebView-Element, die gewünschte Seite zu laden, während der Rückgabewert NO keine Seite lädt. Der Plan ist wie folgt: Eine JavaScript-Funktion lädt eine fiktive Seite einschließlich einiger GET-Parameter über window.location. Durch das spezielle URL Stichwort ist die App in der Lage herauszufinden, ob eine echte Seite geladen werden soll oder ob eine In-App Funktion aufgerufen wird (App-Call). An diesem Punkt kann die Funktion entweder den Aufruf stoppen und die Aktion durchführen oder die Seite laden. Die Funktion erledigt also zwei Dinge:

• Sie prüft, ob ein normaler Link oder ein App-Aufruf angefordert wird und gibt den entsprechenden booleschen Wert zurück.
• Sie holt die gegebenen Parameter und überprüft, ob sie zu den vordefinierten Aktionen passen.

Basierend auf dem Beispiel von tetontech ist dies der Code, über den wir sprechen:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
 NSString *url = [[request URL] absoluteString];
 NSLog(@"Requesting: %@",url);
 NSArray *urlArray = [url componentsSeparatedByString:@"?"];
 NSString *cmd = @"";
 NSMutableArray *paramsToPass = nil;
 // isolate command and parameters
 if([urlArray count] < 1){
 NSString *paramsString = [urlArray objectAtIndex:1];
 NSArray *urlParamsArray = [paramsString componentsSeparatedByString:@"&"];
 cmd = [[[urlParamsArray objectAtIndex:0] componentsSeparatedByString:@"="] objectAtIndex:1];
 int numCommands = [urlParamsArray count];
 paramsToPass = [[NSMutableArray alloc] initWithCapacity:numCommands-1];
 for(int i = 1; i &lt; numCommands; i++){
 NSString *aParam = [[[urlParamsArray objectAtIndex:i] componentsSeparatedByString:@"="] objectAtIndex:1];
 [paramsToPass addObject:aParam];
 }
 }
 if([cmd compare:@"toggleWorking"] == NSOrderedSame){
 NSLog(@"Turning working indicator...");
 if([UIApplication sharedApplication].networkActivityIndicatorVisible == NO) {
 [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
 NSLog(@"...on");
 } else {
 [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
 NSLog(@"...off");
 }
 } else if([cmd compare:@"logMessage"] == NSOrderedSame) {
 NSString *message = [[paramsToPass objectAtIndex:0] stringByReplacingOccurrencesOfString:@"%20" withString:@" "];
 NSString *message = [[paramsToPass objectAtIndex:0] stringByReplacingPercentEscapesUsingEncoding:NSASCIIStringEncoding];
 NSLog(@"Received JS message: %@",message);
 }
 // only load the page if it is the initial index.html file
 NSRange aSubStringRange = [url rangeOfString:@"index.html"];
 if(aSubStringRange.length != 0){
 return YES;
 } else {
 NSLog(@"App call found: request cancelled");
 return NO;
 }
}

Wie schon gesagt, extrahiert und isoliert diese Funktion jeden gegebenen Parameter und Befehl und überprüft mit einigen if-Anweisungen, ob ein Befehl erkannt wird. Wenn das der Fall ist, können zusätzliche Parameter verwendet werden, um eine Aktion auszuführen. In diesem Beispiel gibt es nur zwei mögliche Aktionen:

• Mit der Anforderung ?cmd=toggleWorking wird in der Tab-Leiste des iPad – abhängig von seinem gegenwärtigen Zustand – ein sich drehendes Rädchen ein- oder ausgeschaltet.
• Die Aktion logMessage kann aufgerufen werden mit: ?cmd=logMessage&param=Hello%20World. Es wird eine Nachricht als log-Datei an die Debug-Konsole übermittelt.

NSRange aSubStringRange = [url rangeOfString:@"index.html"];
if(aSubStringRange.length != 0){

Die letzte Überprüfung ist sehr wichtig! Angenommen, Ihre Hauptseite heißt index.html, wird dadurch sicher gestellt, dass die Seite einmal beim Start geladen wird. Weitere Anforderungen sind im Moment blockiert, aber Sie kennen sicherlich andere Ansätze, um sicherzustellen, dass App-Aufrufe nicht geladen werden.

Beispielprojekt herunterladen

Gehen Sie zu GitHub und laden sie das WebViewInterface-Example herunter. Quelle:

• http://tetontech.wordpress.com/2008/08/14/calling-objective-c-from-javascript-in-an-iphone-uiwebview/