how to handle javascript onorientationchange event inside uiwebview

问题

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

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

回答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
}

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

来源：https://stackoverflow.com/questions/5220999/how-to-handle-javascript-onorientationchange-event-inside-uiwebview

标签

iphone

javascript-events

uiwebview

orientation