iPhone UIWebView local resources using Javascript and handling onorientationChange

Question

I\'m trying to server HTML Javascript and CSS content from an iPhone application\'s local resources, and I\'m having trouble handling onOrientationChange events and includin

Answer 1

The answer can be traced from the warning I was getting in XCode:

warning: no rule to process file '$(PROJECT_DIR)/html/orientation.js' of type sourcecode.javascript for architecture i386

XCode setup *.js javascript as some type of source code needed to be compiled in the application when I wanted to include it as a resource so I solved it by doing 2 things.

1. Select .js file and in the "Detail" view unselect the bullseye column indicating it is compiled code
2. In the "Groups & files" view expand the "Targets" tree and expand the application then go to "Copy Bundle Resources" and drag the *.js files into it

The Apple dev forums has a posted solution:

• UIWebView and JavaScript

It appears that you are getting bit by the "Xcode thinks that .js are things to be compiled" feature. Basically, Xcode thinks that the script should somehow be run or compiles, so marks it as part of the source code. Source code, of course, is not copied into the resources.

So you need to do two things - select the .js file in your project, and turn off the checkbox that indicates that it is compiled (the "bullseye" column). If you don't do this, you'll get a warning in your build log about being unable to compile the file (which should be your first warning - always try to figure out and and correct any and all warning that appear in your build).

Then drag it and drop it in the target's "Copy Bundle Resources".

Answer 2

An answer to your second problem of the onorientationchange handler not being called in UIWebView:

I noticed that the window.orientation property does not work properly and the window.onorientationchange handler does not get called. Most apps suffer this problem. This can be fixed by setting the window.orientation property and calling window.onorientationchange in the willRotateToInterfaceOrientation method of the view controller that contains your UIWebView:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    switch (toInterfaceOrientation)
    {
        case UIDeviceOrientationPortrait:
            [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 0;});window.onorientationchange();"];
            break;
        case UIDeviceOrientationLandscapeLeft:
            [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 90;});window.onorientationchange();"];
            break;
        case UIDeviceOrientationLandscapeRight:
            [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return -90;});window.onorientationchange();"];
            break;
        case UIDeviceOrientationPortraitUpsideDown:
            [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 180;});window.onorientationchange();"];
            break;
        default:
            break;
    }
}

Answer 3

I've found iOS 4.2 does not support window.orientation property in UIWebView, while in mobile safari it works... So, the only way I have found in order to make my JS react to orientation changes was to make my objective-c code call a javascript function defined in currently displayed UIWebView webpage. Here's a sample code, overriding ViewController's didRotateFromInterfaceOrientation method:

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    [webView stringByEvaluatingJavaScriptFromString:
          [NSString stringWithFormat:@"didRotateTo('%@')", 
            [self currentOrientationAsString]]];
}
- (NSString*) currentOrientationAsString {
    switch([[UIDevice currentDevice] orientation]) {
        case UIDeviceOrientationLandscapeLeft:
        case UIDeviceOrientationLandscapeRight:
            return @"landscape";
    }
    return @"portrait"; // assuming portrait is default
}

You have to define your Javascript function as follows:

function didRotateTo(ori) {
  if (ori=="portrait") {
    // ... do something
  } else {
    // ... do something else
  }
}

Enjoy! :)

Answer 4

It is better to use

• (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation

since safari is actually calling orientationChange AFTER the view has rotated.

This was important to me because I needed to resize my HTML5 canvases AFTER the page had rotated and I knew how big it's container was.

Answer 5

I found some additional info for using UIWebView with local resources.

I collected them together in a short blog. If somebody is interested there is an working example that you can download.

http://mentormate.com/blog/iphone-uiwebview-class-local-css-javascript-resources/