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.

Community · Accepted Answer · 2017-05-23 12:04:11Z

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, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 7, 2011 at 14:45

Nick Weaver

47.3k12 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Waqas Raja Over a year ago

I don't need local resources, I just want to capture orientation change event in my html's javascript

Nick Weaver Over a year ago

I added a quote from the post I tried to unsuccessfully show you. It's actually the problem you have stated.

Waqas Raja Over a year ago

yeah thanks; my problem is solved. but it is weird to consume orientation enabled html pages in an application.

Nick Weaver Over a year ago

You're welcome. Yes it shouldn't be this way, but it's a good workaround for this bug.

Waqas Raja · Accepted Answer · 2011-03-20 05:04:50Z

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, 2011 at 5:04

Waqas Raja

10.9k4 gold badges35 silver badges38 bronze badges

answered Mar 20, 2011 at 2:12

Marcio

111 bronze badge

2 Comments

Waqas Raja Over a year ago

It's looking good, I will check it later & let you know if it works.

tyler Over a year ago

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...

Jonathan Spooner · Accepted Answer · 2011-12-06 06:08:00Z

1

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

edited Dec 6, 2011 at 6:08

Jonathan Spooner

7,7622 gold badges38 silver badges41 bronze badges

answered Dec 5, 2011 at 16:24

stef_pe

111 bronze badge

1 Comment

Waqas Raja Over a year ago

yes, it is right in app. but how could I know in my html page?

Collectives™ on Stack Overflow

How to handle Javascript onorientationchange event inside uiwebview

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related