web-dev-qa-db-ja.com

JavaScriptを使用してonorientationChangeを処理するiPhone UIWebViewローカルリソース

IPhoneアプリケーションのローカルリソースからHTML JavascriptとCSSコンテンツを提供しようとしていますが、onOrientationChangeイベントの処理と外部JavaScriptの組み込みに問題があります。

CSSで適切にリンクできるようですが、JavaScriptはできません。 onOrientationChange（ iPhone Webサイトの構築方法 ）を処理する次の例を使用しようとしていますが、アプリのNSBundle mainBundleからWebページを提供しています。

Java.script関数を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>
uiwebviewiphone
29
Dougnukem

答えは、私がXCodeで受け取っていた警告から追跡できます。

警告：アーキテクチャi386のタイプsourcecode.javascriptのファイル '$（PROJECT_DIR）/html/orientation.js'を処理するルールはありません

XCodeのセットアップ* .js javascriptをリソースとして含めたいときにアプリケーションでコンパイルする必要があるソースコードのタイプとして、2つのことを実行して解決しました。

  1. .jsファイルを選択し、「詳細」ビューでブルズアイ列の選択を解除して、コンパイルされたコードであることを示します。
  2. [グループとファイル]ビューで[ターゲット]ツリーを展開し、アプリケーションを展開して、[バンドルリソースのコピー]に移動し、*。jsファイルをドラッグします。

Apple dev forumsに投稿された解決策があります：

「Xcodeは.jsはコンパイルされるものであると考えています」機能に少し気づいているようです。基本的に、Xcodeはスクリプトを何らかの形で実行またはコンパイルする必要があると考えているため、ソースコードの一部としてマークします。もちろん、ソースコードはリソースにコピーされません。

したがって、2つのことを行う必要があります。プロジェクトで.jsファイルを選択し、コンパイルされたことを示すチェックボックス（「bullseye」列）をオフにします。これを行わないと、ファイルをコンパイルできないことに関するビルドログに警告が表示されます（これは最初の警告です）-ビルドに表示されるすべての警告を常に把握して修正してください）。

次に、それをドラッグして、ターゲットの「バンドルリソースのコピー」にドロップします。

47
Dougnukem

OnorientationchangeハンドラーがUIWebViewで呼び出されないという2番目の問題への回答：

Window.orientationプロパティが正しく機能せず、window.onorientationchangeハンドラーが呼び出されないことに気付きました。ほとんどのアプリがこの問題を抱えています。これは、UIWebViewを含むビューコントローラのwillRotateToInterfaceOrientationメソッドで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;
    }
}
24
Martijn Thé

使う方がいい

  • （void）didRotateFromInterfaceOrientation：（UIInterfaceOrientation）fromInterfaceOrientation

サファリはビューが回転した後に実際にorientationChangeを呼び出しているためです。

ページが回転した後でHTML5キャンバスのサイズを変更する必要があり、コンテナの大きさを知っていたため、これは私にとって重要でした。

6
Gabe

ローカルリソースでUIWebViewを使用するための追加情報が見つかりました。

それらを短いブログにまとめました。誰かが興味を持っているなら、あなたがダウンロードできる実用的な例があります。

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

3
I.Iordanov

IOS 4.2がUIWebViewのwindow.orientationプロパティをサポートしていないことを発見しましたが、モバイルサファリでは機能します。コードは、現在表示されているUIWebView Webページで定義されている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
  }
}

楽しい！ :)

2
Dmitri Sologoubenko