uiwebview - iPhone UIWebView 本地资源使用 Javascript 并处理 onorientationChange

Question

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

我似乎能够正确链接 CSS，但不能正确链接 javascript。我正在尝试使用以下处理 onOrientationChange 的示例（如何构建 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>

score 47 · Accepted Answer

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

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

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

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

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

UIWebView 和 JavaScript

您似乎被“Xcode 认为 .js 是要编译的东西”功能所吸引。基本上，Xcode 认为脚本应该以某种方式运行或编译，因此将其标记为源代码的一部分。当然，源代码不会复制到资源中。

所以你需要做两件事——在你的项目中选择 .js 文件，并关闭表示它已编译的复选框（“bullseye”列）。如果您不这样做，您将在构建日志中收到有关无法编译文件的警告（这应该是您的第一个警告 - 始终尝试找出并纠正出现在您的构建中的任何和所有警告）。

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

score 24 · Accepted Answer

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

score 6 · Accepted Answer

最好使用

(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation

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

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

享受！:)

uiwebview - iPhone UIWebView 本地资源使用 Javascript 并处理 onorientationChange

5 回答 5

Related

Reference