How to control the page orientations in your iOS PhoneGap application

Thursday, July 26, 2012 by David Conlisk

In your PhoneGap application for iOS, you only have a single html page, with javascript controlling the navigation within your application. This means that you cannot set the allowed orientations natively in iOS - because there is only a single page for your whole application. But what if you want to allow parts of your application to be viewed in landscape, but not others?

I looked into a number of solutions including css and javascript, but nothing seemed to work properly. The css and javascript solution worked, but I felt that the result was a bit shoddy to say the least. The only proper way would be to do it natively.

The key to this solution is the function

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

in MainViewController.m. Here is where you specify which orientations are allowed for your view. My first thought was that I could check the current URL of the UIWebView (which typically just points at your www/index.html file) for any anchors, e.g. www/index.html#myPage, which would let me know which page I'm on. Unfortunately,

self.webView.request.URL.fragment

always returns null. It turns out that the UIWebView helpfully ignores the fragment, i.e. the hash tags, so I was out of luck. Then I started investigating the

stringByEvaluatingJavaScriptFromString

function provided by UIWebView. You can use this function to call a javascript function in your view, and then have the return value available in your native code. So the solution is to ask javascript in the UIWebView what page we're on, and if it's the graph page (in my case) then allow landscape orientation. Otherwise, don't.

This is a reasonably simple solution in the end but it took hours of Googling and trial and error to get it right. Here's hoping you find it useful!

Here is my javascript function, which is included on the page being displayed in the UIWebView (typically www/index.html);

function isGraphPage() {
return (window.location.href.indexOf("#graph") > -1);
}

And here is my function in MainViewController.m:

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
NSString *isGraphPage = [self.webView stringByEvaluatingJavaScriptFromString: @"isGraphPage();"];
NSString *truth = @"true";
if ([isGraphPage isEqualToString:truth]) {
// Allow all orientations allowed globally for the app if we're on the graph page
return [super shouldAutorotateToInterfaceOrientation:interfaceOrientation];
}
else {
// Only allow portrait orientation for all other pages
return interfaceOrientation==UIInterfaceOrientationPortrait;
}
}

UPDATE:I realised that this was only half the battle. Now your user can't enter landscape orientation when viewing any page other than the graph page. But what they can do is enter landscape orientation on the graph page, then browse to another page in your app, and hey! they've managed to view it in landscape mode. Read part 2 of the solution to this problem and fully control the page orientation in your PhoneGap application.

 

If you found this article useful, please click the +1 button!

 

0 comment(s) for “How to control the page orientations in your iOS PhoneGap application”

Please leave a comment: