iPhone UIWebView локальных ресурсов с использованием Javascript и обработки onorientationChange - PullRequest
Новая
       17

iPhone UIWebView локальных ресурсов с использованием Javascript и обработки onorientationChange

29 голосов
/ 09 мая 2009

Я пытаюсь сервировать HTML Javascript и CSS-контент из локальных ресурсов приложения iPhone, и у меня возникают проблемы при обработке событий 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>

Ответы [ 5 ]

47 голосов
/ 12 мая 2009

Ответ можно проследить по предупреждению, которое я получил в XCode:

предупреждение: нет правила для обработки файла '$ (PROJECT_DIR) /html/orientation.js' типа sourcecode.javascript для архитектуры i386

Настройка XCode * .js javascript как некоторый тип исходного кода необходимо было скомпилировать в приложении, когда я хотел включить его в качестве ресурса, поэтому я решил его, выполнив 2 вещи.

  1. Выберите файл .js и в представлении «Сведения» снимите флажок «яблочко», указывая, что это скомпилированный код
  2. В представлении «Группы и файлы» разверните дерево «Цели» и разверните приложение, затем перейдите к «Копировать ресурсы комплекта» и перетащите в него файлы * .js

На форуме разработчиков Apple опубликовано решение:

Похоже, вы получаете немного «Xcode думает, что .js вещи быть скомпилированным ». В основном, Xcode считает, что скрипт должен каким-то образом запускается или компилируется, поэтому отмечает это как часть исходного кода. Источник Код, конечно, не копируется в ресурсы.

Так что вам нужно сделать две вещи - выберите файл .js в вашем проекте и включите от флажка, который указывает, что это скомпилировано ("яблочко" колонка). Если вы этого не сделаете, вы будете получите предупреждение в своем журнале сборки о будучи не в состоянии скомпилировать файл (что должно быть вашим первым предупреждением - всегда пытаться выяснить и и исправить любое предупреждение появляются в вашей сборке).

Затем перетащите его в поле «Копировать ресурсы комплекта» цели.

24 голосов
/ 03 февраля 2010

Ответ на вашу вторую проблему о том, что обработчик onorientationchange не вызывается в UIWebView:

Я заметил, что свойство window.orientation не работает должным образом и обработчик window.onorientationchange не вызывается. Большинство приложений страдают от этой проблемы. Это можно исправить, задав свойство window.orientation и вызвав window.onorientationchange в методе willRotateToInterfaceOrientation контроллера представления, содержащего ваш UIWebView: 

- (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;
    }
}
6 голосов
/ 30 апреля 2010

Лучше использовать

  • (аннулируются) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation

, так как сафари фактически вызывает Ориентация. ИЗМЕНИТЕ ПОСЛЕ того, как представление повернулось.

Это было важно для меня, потому что мне нужно было изменить размер моих HTML5-холстов ПОСЛЕ поворота страницы, и я знал, насколько большой его контейнер.

3 голосов
/ 16 марта 2010

Я нашел дополнительную информацию для использования UIWebView с локальными ресурсами.

Я собрал их вместе в коротком блоге. Если кому-то интересно, есть рабочий пример, который вы можете скачать.

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

2 голосов
/ 01 апреля 2011

Я обнаружил, что iOS 4.2 не поддерживает свойство window.orientation в UIWebView, в то время как в мобильном сафари это работает ... Таким образом, единственный способ, которым я нашел, чтобы заставить мой JS реагировать на изменения ориентации, - это заставить мой код target-c вызывать функцию javascript, определенную на отображаемой в данный момент веб-странице UIWebView. Вот пример кода, переопределяющий метод didRotateFromInterfaceOrientation ViewController: 

- (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
  }
}

Наслаждайтесь! :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...