web-dev-qa-db-fra.com

"alert ()" et "confirm ()" ne fonctionnent pas avec "Apple-mobile-web-app-capable"

Sous iOS (actuellement 7.0), il semble que alert() et confirm() ne fonctionnent pas lorsque notre application Web est épinglée sur l'écran d'accueil (à l'aide de la balise méta Apple-mobile-web-app-capable).

J'ai trouvé un utilisateur ayant un problème similaire sur Twitter:

https://Twitter.com/thomasfuchs/status/380137801259704320

Quelqu'un a-t-il un correctif temporaire s'il s'agit vraiment d'un bogue dans iOS 7?

javascriptiossafariios7
19
allaire

Les bogues JavaScript alert() et confirm() sont corrigés à partir de iOS 7.0.3.

8
andersen

Nous avons eu un problème similaire avec les alertes de rupture de notre application Web. Le cas spécifique était une alerte déclenchée à partir de l'échange d'une liste de sélection. Nous avons créé une page de test très simple comme celle-ci:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <select onchange="alert('broken!');">
            <option value="one">One</option>
            <option value="two">Two</option>
        </select>
    </body>
</html>

L'exécution de cette page à partir de Safari sur un iPad et la modification de la liste de sélection déclenchent l'alerte, puis Safari se bloque. Vous devez alors fermer Safari. Cela concerne Safari en général - votre application Web ne doit pas nécessairement être épinglée à l'écran d'accueil. Vous devriez pouvoir le tester sur un iPad sous iOS 7 sur cette page de test http://jsbin.com/AGoTejA/1 .

Nous avons testé cela sur un iPad 2 (MC774B/A) et un iPad 3 (MD367B/A) et Safari se bloque sur les deux.

Une façon simple de contourner ce problème consiste à utiliser setTimeout () pour retarder l'exécution de l'alerte. Le problème ne semble se produire que lorsque Safari essaie d’afficher la superposition qui affiche les éléments de la liste de sélection et une alerte en même temps. confirm () est également cassé de la même manière.

14
Barrie

Je ne sais pas si c'est intentionnel ou s'il y a un bug, mais je peux confirmer qu'il s'agit d'un réel problème. Une autre chose à prendre en compte est que si l'utilisateur a la possibilité d'enregistrer les mots de passe activés, tout site nécessitant une connexion échouera car cette invite est également bloquée. (vous pouvez essayer ceci avec un simple formulaire avec un nom d'utilisateur et un mot de passe et rien d'autre et il ne veut tout simplement pas être envoyé). Il existe cependant des solutions de contournement pour les trois problèmes. 

  1. Connexion - définissez autocomplete = "off" dans la balise de formulaire du site ou détectez que le site exécute IOS7 et en mode plein écran et appliquez ce paramètre

    $('form').attr('autocomplete', 'off');

  2. Alertes et confirmations - vous pouvez écrire une fonction personnalisée en JavaScript ou remplacer les fonctions existantes de la même manière qu'ici: http://andrewensley.com/2012/07/override-alert-with-jquery-ui- dialogue/ . J'aime utiliser le plug-in SimpleModal d'Eric Martin, qui comporte une confirmation intégrée, la démo inférieure de http://www.ericmmartin.com/projects/simplemodal-demos/ .

J'espère que cela aidera.

5
Richard Wilson

J'ai résolu avec un setTimeout

<select onchange="setTimeout(function(){alert('not broken!');},200)">
                <option value="one">One</option>
                <option value="two">Two</option>
            </select>

http://jsbin.com/iPuXiVA/4/

Quoi qu'il en soit, il semble que ce bug affecte l'iPad et non l'iPhone.

4
Marconi

Je pense qu’un bogue lié à l’animation de masquage des zones de sélection permet de masquer en douceur… Je n’aime pas les hacks, mais cette méthode fonctionne… .. Confirmer après 100 ms (cela suffit pour le moment où la fenêtre de sélection se ferme)

var object;

$('form select').change(function()
{
    object = $(this);
    timer = setTimeout(confirmation, 100);
});

function confirmation()
{
    switch(object.val())
    {
        case 'post_approved':
        case 'post_delete':
        case 'thread_delete': object.parent('form').find('input[name=id]').val(object.parent('form').find('input[name=post_id]').val()); break;
        case 'user_delete_all': object.parent('form').find('input[name=id]').val(object.parent('form').find('input[name=user_id]').val()); break;
        default: return false; break;
    }

    if(object.parent('form').find('input[name=act]').val() === 'post_approved'  || (object.parent('form').find('input[name=act]').val() != '' && confirm('Вы уверены?')))
        object.parent('form').submit();
    else
        return false;
}
0
Boris

Andersen a raison: 

alertes javascript () et confirm () corrigés à partir de iOS7.0.3

je viens de l'installer et de le tester moi-même. 

Tandis que Apple résolvait le problème, je me suis démené pour trouver un moyen de le contourner, et j'ai finalement trouvé un plug-in js appelé Alertify que je pensais utile de partager. Je pense que je vais l'utiliser à partir de maintenant, quelle que soit la résolution du bogue! Cela rend les alertes, les invites, etc. vraiment, vraiment bien. Je pensais que cela valait la peine d'être partagé car les lecteurs de cet article utilisent probablement les alertes standard du navigateur. J'étais ravi de tomber dessus. 

0
DaNnY BoY