How to handle Javascript onorientationchange event inside uiwebview

Question

Anyone could help me how to handle orientation change event in Javascript when visiting through uiwebview in iPhone?

I am trying to capture onorientationchange event of Javascript. I tried following code:

<style type="text/css" media="only screen and (max-device-width: 480px)">
    .portrait
    {
        width: 300px;
        padding: 0 15px 0 5px;
    }
    .landscape
    {
        width: 460px;
        padding: 0 15px 0 5px;
    }
</style>

<script type="text/javascript">
    window.onload = orientationchange;
    window.onorientationchange = orientationchange;
    function orientationchange() {
        if (window.orientation == 90
            || window.orientation == -90) {
            document.getElementById('contents').className = 'landscape';
        }
        else {
            document.getElementById('contents').className = 'portrait';
        }
    }
</script>

// and I have a div inside html

<div id="contents">
    my contents and description... e.t.c, and e.t.c...
</div>

It works fine in safari but when I visit the page using uiwebview the orientation change event is not being captured and my desired functionality could not being achieved.

Solution 1

I'd like to point you to this post: "iphone-uiwebview-local-resources-using-javascript-and-handling-onorientationchang", the answer directly below the accepted answer does pay tribute to your question: Handle orientation changes in application code and inject changes with javascript. I am quoting in hope the author won't mind:

"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:"

Solution 2

Thank u.

Another way to write this is:

var onorientationchange = function()    {
    document.getElementById('contents').className =
      Math.abs(window.orientation == 90)? "landscape" : "portrait";
}
window.onload = function() {
    window.onorientationchange = window.onorientationchange
}

Solution 3

Put this in viewDidLoad:

[[UIDevice currentDevice]beginGeneratingDeviceOrientationNotifications];
 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(hasOrientationChanged:) name:@"UIDeviceOrientationDidChangeNotification" object:nil];

- (void)hasOrientationChanged:(NSNotification *)notification {
    UIDeviceOrientation currentOrientation; 
    currentOrientation = [[UIDevice currentDevice] orientation];
    if(currentOrientation == UIDeviceOrientationLandscapeLeft){
        NSLog(@"left");
    }

    if(currentOrientation == UIDeviceOrientationLandscapeRight){
        NSLog(@"right");
    }

}

Now you can call your webview with the right orientation :)