我试图服务器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的事情。

  1. 选择。js文件以及在"详细"图取消选择牛列表示,它是编码
  2. 在"团体和文件"图扩大"目标"树和扩大应用程序,然后转到"复制捆绑资源"和拖*.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
  }
}

享受! :)

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top