iPhone UIWebView 本地资源使用 Javascript 并处理 onorientationChange答案

【问题标题】：iPhone UIWebView local resources using Javascript and handling onorientationChangeiPhone UIWebView 本地资源使用 Javascript 并处理 onorientationChange
【发布时间】：2010-10-25 00:51:30
【问题描述】：

我正在尝试从 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>

【问题讨论】：

标签： uiwebview iphone

【解决方案1】：

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

享受吧！ :)

【讨论】：

我似乎发现了同样的问题，因为 Martijn Thé 的解决方案没有调用我的函数。是否有可能以某种方式“调用” onorientationchange 事件？

【解决方案2】：

最好用

(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation

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

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

【讨论】：

【解决方案3】：

我发现了一些关于将 UIWebView 与本地资源一起使用的附加信息。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

我相信当你从桌面上的一个图标运行你的 webapp 时，你会注意到左边是 -90，右边是 90。
这又为我节省了三天的调试时间！非常感谢！

【解决方案5】：

可以从我在 XCode 中得到的警告中找到答案：

警告：没有规则为架构 i386 处理 sourcecode.javascript 类型的文件“$(PROJECT_DIR)/html/orientation.js”

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

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

Apple 开发者论坛发布了解决方案：

UIWebView and JavaScript

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

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

然后将其拖放到目标的“复制捆绑资源”。

【讨论】：

那么 xcode4 的更新答案是什么？好像再也找不到靶心栏了？谢谢
for xcode4 stackoverflow.com/questions/5959941/…