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.

score 4 · Accepted Answer · edited May 23 '17 at 12:04

4

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

edited May 23 '17 at 12:04

Community

1
1

answered Mar 07 '11 at 14:45

Nick Weaver

47,228
12
98
108

I don't need local resources, I just want to capture orientation change event in my html's javascript – Waqas Raja Mar 07 '11 at 14:53
I added a quote from the post I tried to unsuccessfully show you. It's actually the problem you have stated. – Nick Weaver Mar 07 '11 at 14:59
yeah thanks; my problem is solved. but it is weird to consume orientation enabled html pages in an application. – Waqas Raja Mar 07 '11 at 18:39
You're welcome. Yes it shouldn't be this way, but it's a good workaround for this bug. – Nick Weaver Mar 07 '11 at 18:52

score 1 · Answer 2 · edited Mar 20 '11 at 05:04

1

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
}

edited Mar 20 '11 at 05:04

Waqas Raja

10,802
4
33
38

answered Mar 20 '11 at 02:12

Marcio

11
1

It's looking good, I will check it later & let you know if it works. – Waqas Raja Mar 20 '11 at 04:50
Thanks for the answer, but there's a parens bug in the code. You want Math.abs(window.orientation) == 90, not the abs of the comparison... – tyler Oct 31 '11 at 19:38

score 1 · Answer 3 · edited Dec 06 '11 at 06:08

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

yes, it is right in app. but how could I know in my html page? — Waqas Raja, Dec 05 '11 at 18:21

How to handle Javascript onorientationchange event inside uiwebview

3 Answers3

Linked