web-dev-qa-db-fra.com

iPhone UIWebView Ressources locales à l'aide de JavaScript et de manipulation OnorientationChanger

J'essaie de serveur HTML JavaScript et du contenu CSS dans les ressources locales d'une application iPhone, et j'ai du mal à gérer les événements onichangeationChanger et y compris JavaScript externe.

Je semble pouvoir lier à CSS correctement mais pas JavaScript. J'essaie d'utiliser l'exemple suivant de manipulation de la manipulation onorientationchange ( Comment construire un site Web iPhone ) mais je sert à la page Web de la Nsbundle Mainbundle de My APP.

J'ai essayé de joindre une fonction JavaScript à la corpule.onorientationchange et à window.onorientationchange, mais ni de travail lorsque vous avez servi de uiwebview localement (ou à distance), mais cela fonctionne si j'utilise l'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

La réponse peut être attribuée à partir de l'avertissement que j'étais en Xcode:

aVERTISSEMENT: Aucune règle pour traiter le fichier '$ (project_dir) /html/orientation.js' de type Sourcecode.javaScript pour l'architecture i386

Configuration Xcode * .js JavaScript Comme quel type de code source devait être compilé dans l'application lorsque je voulais l'inclure en tant que ressource, donc je l'ai résolu en faisant 2 choses.

  1. Sélectionnez le fichier .js et dans la vue "Détail" Désélectionnez la colonne Bullseye indiquant qu'il est compilé Code
  2. Dans la vue "Groupes & Files" Développez l'arborescence "Cibles" et développez l'application, puis passez à "Copier les ressources de l'ensemble" et faites glisser les fichiers * .js

Les forums Apple Dev ont une solution postée:

Il semble que vous obteniez que le "Xcode pense que .js sont des choses à compiler". Fondamentalement, Xcode pense que le script devrait être exécuté ou compiler en quelque sorte, la marque dans le cadre du code source. Bien sûr, le code source n'est pas copié dans les ressources.

Donc, vous devez faire deux choses - sélectionnez le fichier .js dans votre projet et désactivez la case à cocher qui indique qu'il est compilé (la colonne "Bullseye"). Si vous ne le faites pas, vous obtiendrez un avertissement dans votre journal de construction d'être incapable de compiler le fichier (qui devrait être votre premier avertissement - essayez toujours de comprendre et de corriger tout avertissement qui apparaît dans votre construction. ).

Faites-la glisser ensuite et déposez-le dans la "Ressources de bundle de copie" de la cible.

47
Dougnukem

Une réponse à votre deuxième problème du gestionnaire d'onorientationchange n'étant pas appelé UIWebView:

J'ai remarqué que la propriété Window.Orientation ne fonctionne pas correctement et le gestionnaire de window.onorientationchange ne s'appelle pas. La plupart des applications subissent ce problème. Ceci peut être corrigé en définissant la fenêtre Window.Orientation et la fenêtre d'appel.EnoRientationChanger dans la méthode WillroTateTointerFaceOrientation du contrôleur d'affichage contenant votre 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;
    }
}
24
Martijn Thé

Il vaut mieux utiliser

  • (vide) DidrotateFrominterfaceOrientation: (UiTinterfaceOrientation) DuinterfaceOrientation

puisque Safari appelle en réalité l'orientationChanger une fois la vue tournée.

C'était important pour moi, car je devais redimensionner mes toiles HTML5 après la rotation de la page et je savais à quel point le conteneur est grand.

6
Gabe

J'ai trouvé des informations supplémentaires pour utiliser UiWebView avec des ressources locales.

Je les ai rassemblés ensemble dans un court blog. Si quelqu'un est intéressé, il y a un exemple de travail que vous pouvez télécharger.

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

3
I.Iordanov

J'ai trouvé iOS 4.2 ne prend pas en charge la propriété window.Orientation dans UiWebView, tandis que dans la safari mobile, cela fonctionne ... Donc, la seule façon dont j'ai trouvé pour que mon JS réagisse aux changements d'orientation était de faire mon objectif-c Code Appelez une fonction JavaScript définie dans la page Web UIWebView actuellement affichée. Voici un exemple de code, la méthode de DidrotatefaceSorientation DidrotateFaceSorientation de Concontroller

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

Vous devez définir votre fonction JavaScript comme suit:

function didRotateTo(ori) {
  if (ori=="portrait") {
    // ... do something
  } else {
    // ... do something else
  }
}

Prendre plaisir! :)

2
Dmitri Sologoubenko