title: iPhone UIWebView local resources using Javascript and handling onorientationChange
body: <p>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 including external Javascript.</p>
  
  <p>I seem to be able to link in CSS properly but not javascript. I'm trying to use the following example of handling onOrientationChange (<a href="http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/" rel="noreferrer">How to build an iPhone website</a>) but I'm serving the webpage from my app's NSBundle mainBundle.</p>
  
  <p>I tried attaching a javascript function to body.onorientationchange and to window.onorientationchange but neither work when served from UIWebView locally (or remotely), but it works if I'm using the iPhone Safari.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
      &lt;title&gt;How to build an iPhone website&lt;/title&gt;
  
      &lt;meta name="author" content="will" /&gt;
      &lt;meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" /&gt;
      &lt;meta name="description" content="Welcome to engege interactive on the iPhone!" /&gt;
      &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&gt;
      &lt;link rel="apple-touch-icon" href="images/template/engage.png"/&gt;
  
      &lt;style type="text/css"&gt;
          @import url("iphone.css");
      &lt;/style&gt;
      &lt;!--
      &lt;script type="text/javascript" src="orientation.js"&gt;&lt;/script&gt;
      --&gt;
      &lt;script type="text/javascript"&gt;
  
  
  function updateOrientation(){
      try  {
          var contentType = "show_normal";
          switch(window.orientation){
              case 0:
                  contentType = "show_normal";
                  break;
  
              case -90:
                  contentType = "show_right";
                  break;
  
              case 90:
                  contentType = "show_left";
                  break;
  
              case 180:
                  contentType = "show_flipped";
                  break;
          }
  
          document.getElementById("page_wrapper").setAttribute("class", contentType);
          //alert('ORIENTATION: ' + contentType);
      }
      catch(e) {
          alert('ERROR:' + e.message);
      }
  } 
  
  window.onload = function initialLoad(){
      try {
          loaded();
          updateOrientation();
      }
      catch(e) {
          alert('ERROR:' + e.message);
      }
  }
  
          function loaded() {
              document.getElementById("page_wrapper").style.visibility = "visible";
  
          }
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onorientationchange="updateOrientation();"&gt;
  
      &lt;div id="page_wrapper"&gt;
          &lt;h1&gt;Engage Interactive&lt;/h1&gt;
          &lt;div id="content_left"&gt;
              &lt;p&gt;You are now holding your phone to the left&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="content_right"&gt;
              &lt;p&gt;You are now holding your phone to the right&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="content_normal"&gt;
              &lt;p&gt;You are now holding your phone upright&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="content_flipped"&gt;
              &lt;p&gt;This doesn't work yet, but there is a chance apple will enable it at some point, so I've put it in anyway. You would be holding your phone upside down if it did work.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>