iPhone的UIWebView本地资源使用Javascript和处理onorientationChange
我试图从一个iPhone应用程序的本地资源服务器的HTML JavaScript和CSS内容，并且在处理onOrientationChange事件和包括外部JavaScript时遇到问题。
我似乎能够正确链接在CSS，但不是JavaScript。 我试图使用下面的例子来处理onOrientationChange（ 如何build立一个iPhone网站 ），但我从我的应用程序的NSBundle mainBundle服务的网页。
我尝试附加一个JavaScript函数body.onorientationchange和window.onorientationchange但从UIWebView本地（或远程）提供服务时，但它工作，如果我使用的iPhone Safari。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How to build an iPhone website</title> <meta name="author" content="will" /> <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" /> <meta name="description" content="Welcome to engege interactive on the iPhone!" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link rel="apple-touch-icon" href="images/template/engage.png"/> <style type="text/css"> @import url("iphone.css"); </style> <!-- <script type="text/javascript" src="orientation.js"></script> --> <script type="text/javascript"> 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"; } </script> </head> <body onorientationchange="updateOrientation();"> <div id="page_wrapper"> <h1>Engage Interactive</h1> <div id="content_left"> <p>You are now holding your phone to the left</p> </div> <div id="content_right"> <p>You are now holding your phone to the right</p> </div> <div id="content_normal"> <p>You are now holding your phone upright</p> </div> <div id="content_flipped"> <p>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.</p> </div> </div> </body> </html> 答案可以从我在XCode中获得的警告中find：
警告：没有规则处理架构i386的types为sourcecode.javascript的文件“$（PROJECT_DIR）/html/orientation.js”
XCode设置* .js的JavaScript作为一些types的源代码需要在应用程序中编译时，我想包括它作为一个资源，所以我通过做两件事情来解决它。
- select.js文件，并在“详细信息”视图中取消selectBullseye列表示它是编译代码
- 在“Groups＆files”视图中，展开“Targets”树并展开应用程序，然后转到“Copy Bundle Resources”并将* .js文件拖入其中
苹果开发论坛有一个发布的解决scheme：
- UIWebView和JavaScript
看来，你正在通过“Xcode认为.js是要编译的东西”function。 基本上，Xcode认为脚本应该以某种方式运行或编译，所以将其标记为源代码的一部分。 源代码当然不会被复制到资源中。
所以你需要做两件事 – 在你的项目中select.js文件，并closures指示它被编译的checkbox（“bullseye”列）。 如果你不这样做，你会在构build日志中得到一个关于无法编译文件的警告（这应该是你的第一个警告 – 总是试图找出并修正出现在你的构build中的所有警告）。
然后将其拖放到目标的“复制包资源”中。
在UIWebView中不会调用onorientationchange处理程序的第二个问题的答案：
我注意到window.orientation属性不能正常工作，并且window.onorientationchange处理程序不会被调用。 大多数应用程序遭受这个问 这可以通过设置window.orientation属性并在包含UIWebView的视图控制器的willRotateToInterfaceOrientation方法中调用window.onorientationchange来解决：
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { switch (toInterfaceOrientation) { case UIDeviceOrientationPortrait: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 0;});window.onorientationchange();"]; break; case UIDeviceOrientationLandscapeLeft: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 90;});window.onorientationchange();"]; break; case UIDeviceOrientationLandscapeRight: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return -90;});window.onorientationchange();"]; break; case UIDeviceOrientationPortraitUpsideDown: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__('orientation',function(){return 180;});window.onorientationchange();"]; break; default: break; } }
最好使用
- （空隙）didRotateFromInterfaceOrientation：（UIInterfaceOrientation）fromInterfaceOrientation
因为safari实际上正在调用orientationChange后视图已经旋转。
这对我来说很重要，因为我需要在页面旋转后调整HTML5canvas的大小，我知道它的容器有多大。
我发现使用本地资源的UIWebView的一些额外的信息。
我在一个简短的博客中汇集了他们。 如果有人感兴趣，可以下载一个工作示例。
http://mentormate.com/blog/iphone-uiwebview-class-local-css-javascript-resources/
我发现iOS 4.2不支持UIWebView中的window.orientation属性，而在移动Safari中它的工作原理…所以，我发现为了让我的JS对方向变化做出反应的唯一方法是让我的objective-c代码调用在当前显示的UIWebView网页中定义的javascript函数。 这是一个示例代码，覆盖ViewController的didRotateFromInterfaceOrientation方法：
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { [webView stringByEvaluatingJavaScriptFromString: [NSString stringWithFormat:@"didRotateTo('%@')", [self currentOrientationAsString]]]; } - (NSString*) currentOrientationAsString { switch([[UIDevice currentDevice] orientation]) { case UIDeviceOrientationLandscapeLeft: case UIDeviceOrientationLandscapeRight: return @"landscape"; } return @"portrait"; // assuming portrait is default }
你必须定义你的Javascript函数如下：
function didRotateTo(ori) { if (ori=="portrait") { // ... do something } else { // ... do something else } }
请享用！ 🙂
