Prévenir iPad web app à partir montrant la barre d'adresse de Safari

J'ai une web application qui s'exécute sur Safari sur l'iPad. Je suis de démarrer l'application à partir de l'iPad page d'accueil. Je veux que l'application à lancer en mode plein écran, et de continuer à fonctionner en mode plein écran (c'est à dire ne présentant pas de la barre d'adresse de Safari). J'ai donc ajouté les meta-tags de la page maître du site:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

J'ai démarrer l'application à partir de l'iPad page d'accueil et il démarre bien en mode plein écran (pas de mention de la barre d'adresse de Safari) mais quand je clique sur une autre page du site (avec le même méta-tags, hérité de la même page maître du site) puis la barre d'adresse apparaît soudain dans la vue (et le reste dans la vue). Le lien se présente comme suit (je suis à l'aide de jQueryMobile):

<a href="/Home" data-ajax="false">Home</a>

Comment puis-je forcer l'application web pour rester à la recherche comme un "native-app' en gardant la barre d'adresse cachés lors de la navigation entre les pages internes?

InformationsquelleAutor Journeyman | 2011-06-01
  1. 7

    Il semblerait que le navigateur Safari Mobile ne prend pas en "natif" soutien plein écran si vous utilisez des liens externes. Dès que vous utilisez une ancre html puis il retourne du mode plein écran. De la fenêtre.scrollTo peut être une solution de contournement qui va travailler pour certaines personnes, mais je veux aussi éviter de la façon dont l'INTERFACE utilisateur retourne lui-même lors de la transition vers le non-mode plein écran trop.

    La réponse est d'utiliser la fenêtre.emplacement.assign(). Cela permet de maintenir l'application en plein écran dans "indigènes" en mode plein écran. Vous avez juste besoin de revoir vos balises javascript fenêtre.emplacement.attribuer(url) de téléphone, ce qui conserve alors la chose en plein écran.

    • Ouais, mais c'est dégueulasse. Appareil de réglage de hauteur et quelques autres mediaqueries pouvez également activer l'application en plein écran sans les casser pour les autres navigateurs.
    • merci pour le commentaire. Dites-vous que je peux utiliser des <a href="bla"> liens et de ne pas sauter de plein écran? Si oui, de quel appareil-hauteur et d'autres paramètres dois-je, et d'éviter la désagréable page-swap effet visuel?
    • <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> bien que cela semble casser le orientationchange sur un ipod. Je n'ai pas d'explorer le sujet.
    • J'ai cette balise déjà dans la tête, mais sur iOS 4.3.3 si vous émettez un <a href="sample.htm"> lien, puis il saute hors de mode plein écran. Je crois que jQueryMobile présente également ce comportement si vous utilisez ces liens externes. La seule solution que j'ai trouvé est la fenêtre.emplacement.assign(). Je suis intéressé par pourquoi vous considérez que c'est d'être méchant - n'est-il pas pris en charge par tous les navigateurs? - merci pour l'entrée.
    • Ok, vous me acculé, je retire ce que. 🙂 Je n'en ai pas vu cette chose en usage avant et je suppose qu'il n'était pas de la croix-navigateur. Donc ce n'est pas méchant, mais il casse la JQM DOMcaching, qui n'est pas très agréable.
    • à l'aide de la fenêtre.emplacement.assign() fonctionne très bien pour les liens normal html demande, mais de créer de problème pour ces liens qui font appel ajax (get/post). Est-il possible de le réparer?
    • Je ne comprends pas pourquoi les appels ajax sont différentes de la fenêtre.emplacement.attribuer. Vous avez encore appel Javascript dans le lien lui-même, et ensuite faire l'appel ajax à partir de l'intérieur du code javascript et de mettre à jour des éléments html avec l'ajax retour html. Tous fonctionne très bien pour moi, sans aucun saut de plein-écran.
    • Je suis en train de travailler sur Ruby-On-Rails, où en route.rb j'ai défini des appels pour certaines fonctions. Et je doute à cause de la fenêtre.emplacement.assign(), il fait une demande d'appel et me donne l'erreur que la route ne sont pas définis. Je suis à la recherche en elle.

    InformationsquelleAutor Journeyman
  2. 5

    Ajouter jQuery et vous n'avez pas à modifier tous les liens,

    $(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

    Exemple de lien:

    <a href="nextpage.html">Next page without safari</a>
    • Et que dire de navigateur, l'historique dans ce cas? Il va stocker tous les emplacements précédents et sera de Retour bouton fonctionne correctement?
    • Pour mes fins utiles, cette solution a fonctionné parfaitement
    • Cela a fonctionné pour moi..Merci
    InformationsquelleAutor Christoffer
  3. 2

    peut-être ceci: source

    //When ready...
window.addEventListener("load",function() {
    //Set a timeout...
    setTimeout(function(){
        //Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});
    • Cela peut fonctionner pour iOS Phone et Android navigateurs, mais il ne fonctionnera pas sur un iPad.
    InformationsquelleAutor Phill Pafford