iPhone UIWebView本地资源的使用Javascript和处理onorientationChange
题
我试图服务器HTML Javascript和CSS内容从一个iPhone应用程序的本地资源和我有麻烦的处理onOrientationChange事件和包括外部Javascript。
我似乎可以链接在CSS正确但不javascript。我想用下面的例子处理onOrientationChange(如何建立一个网站的iPhone)但我提供服务的网页从我的应用程序的NSBundle mainBundle.
我试图将一个javascript功能的身体。onorientationchange和窗口。onorientationchange但既不工作的时候从UIWebView地(或远程),但它的工作如果我使用的是iPhone野生动物园。
<!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>
解决方案
答案可以追溯到从警告我正在模式:
警告:没有规则处理的文件'$(PROJECT_DIR)/html/orientation.js'的类型代码.javascript建筑i386
低安*.js javascript作为某种类型的源代码需要的编制应用程序,当我想到包括它作为一种资源,使我解决了它通过执2的事情。
- 选择。js文件以及在"详细"图取消选择牛列表示,它是编码
- 在"团体和文件"图扩大"目标"树和扩大应用程序,然后转到"复制捆绑资源"和拖*.js文件进去
苹果dev论坛有一个贴方案:
看,你得到一点 该"模式认为是.js的事情 编制"的功能。基本上, 模式认为,该脚本应该 以某种方式进行的或编制的,因此标志 它作为一部分的源码。来源 代码,当然,不是复制到 资源。
所以你需要做两件事-选择 。js文件在您的项目,并打开 关框这表明 它是编制(在"牛" 列)。如果你不这样做,你会 得到一个警告在建立有关日志 无法编写的文件 (这应该是你的第一个警告- 总是试图找出和 纠正任何和所有的警告 出现在你的生成).
然后将它并将它放在 目标是"复制捆绑的资源"。
其他提示
这是回答你的onorientationchange处理程序没有被调用在UIWebView中的第二个问题:
我注意到window.orientation财产不能正常工作和window.onorientationchange处理程序不会被调用。大多数应用程序受此问题。
:这可通过在视图控制器的willRotateToInterfaceOrientation方法包含您的UIWebView设置window.orientation属性并调用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;
}
}
这是更好地使用
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
由于野生动物园是实际调用orientationChange后有旋转。
这是对我很重要因为我需要来调整我HTML5画布之后,该网页已经转并且我知道如何大它的容器了。
我发现使用UIWebView的本地资源,一些额外的信息。
我在很短的博客收集在一起。如果有人有兴趣有一个工作示例,您可以下载。
http://mentormate.com/blog/ iphone-的UIWebView级和本地CSS-JavaScript的资源/
我发现的iOS 4.2不支持window.orientation财产的UIWebView,而在移动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
}
}
享受! :)