Question

我正在尝试从iPhone应用程序的本地资源中为HTML Javascript和CSS内容提供服务，而且我在处理onOrientationChange事件和包括外部Javascript时遇到了问题。

我似乎能够正确地链接CSS而不是javascript。我正在尝试使用以下处理onOrientationChange（How to build an iPhone website）的示例，但我正在从我的应用程序的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>

Answer 1

答案可以追溯到我在XCode中收到的警告：

警告：没有规则处理架构i386类型sourcecode.javascript的'$（PROJECT_DIR）/html/orientation.js'文件

XCode setup * .js javascript作为某种类型的源代码需要在应用程序中编译时我想将它作为资源包含在内，所以我通过做两件事来解决它。

选择.js文件并在“详细信息”视图中取消选择指示已编译代码的靶心列
在“论坛和文件”视图中，展开“目标”树并展开应用程序，然后转到“复制捆绑资源”并将* .js文件拖入其中

Apple dev论坛有一个发布的解决方案：

UIWebView and JavaScript

看起来你有点儿了   “Xcode认为.js就是事物   编译“功能。基本上，   Xcode认为脚本应该   以某种方式运行或编译，所以标记   它作为源代码的一部分。资源   当然，代码不会被复制到   资源。

所以你需要做两件事 - 选择   项目中的.js文件，然后转   关闭表示该复选框的复选框   它被编译（“靶心”）   柱）。如果你不这样做，你会   在你的构建日志中收到警告   无法编译文件   （这应该是你的第一个警告 -   总是想弄清楚和   纠正任何和所有警告   出现在你的构建中。）

然后拖动它并将其放入   目标的“复制捆绑资源”。

Answer 2

在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;
    }
}

Answer 3

最好使用

（无效）didRotateFromInterfaceOrientation：（UIInterfaceOrientation）fromInterfaceOrientation

因为safari实际上是在视图旋转后调用orientationChange。

这对我很重要，因为我需要在页面旋转后调整HTML5画布的大小，我知道它的容器有多大。

Answer 4

我找到了一些使用UIWebView和本地资源的其他信息。

我在一个简短的博客中收集了它们。如果有人感兴趣，可以下载一个工作示例。

http://mentormate.com/blog/iphone-uiwebview-class-local-css-javascript-resources/

Answer 5

我发现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
  }
}

享受！：）

使用Javascript和处理onorientationChange的iPhone UIWebView本地资源

5 个答案: