web-dev-qa-db-fra.com

détecter ipad/iphone webview via javascript

Existe-t-il un moyen de différer via javascript si le site Web est exploité à l'intérieur du safari ipad ou de l'application WebView?

javascriptipadioswebview
82
sod

Ceci utilise une combinaison de window.navigator.userAgent et window.navigator.standalone. Il peut distinguer les quatre états liés à une application Web iOS: safari (navigateur), autonome (plein écran), uiwebview et non iOS.

Démo: http://jsfiddle.net/ThinkingStiff/6qrbn/

var standalone = window.navigator.standalone,
    userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|iPod|ipad/.test( userAgent );

if( ios ) {
    if ( !standalone && safari ) {
        //browser
    } else if ( standalone && !safari ) {
        //standalone
    } else if ( !standalone && !safari ) {
        //uiwebview
    };
} else {
    //not iOS
};
71
ThinkingStiff

Agents utilisateurs

Courir dans UIWebView

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176

Courir dans Safari sur iPad

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

Exécution dans Safari sur Mac OS X

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3

Exécution sous Chrome sur Mac OS X

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19

Exécution dans FireFox sur Mac OS X

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0

Code de détection

var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
75
neoneye

Je pense que vous pouvez simplement utiliser le User-Agent.

METTRE À JOUR

Page parcourue avec iPhone Safari 

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

Je vais essayer dans une seconde avec UIWebView

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

La différence est que celui de Safari indique Safari/6531.22.7

Solution 

var isSafari = navigator.userAgent.match(/Safari/i) != null;
10
Nicolas S

Ouais:

// is this an IPad ?
var isiPad = (navigator.userAgent.match(/iPad/i) != null);

// is this an iPhone ?
var isiPhone = (navigator.userAgent.match(/iPhone/i) != null);

// is this an iPod ?
var isiPod = (navigator.userAgent.match(/iPod/i) != null);
6
John Doherty

J'ai essayé toutes ces solutions mais cela n'a pas fonctionné dans mon cas,
J'allais détecter Télégramme dans Webview . J'ai remarqué que Safari changeait le texte du style de téléphone en un lien avec le préfixe "tel:", je l'ai donc utilisé pour écrire ce code vous pouvez le tester: jsfiddle

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="phone" style="opacity:0">
    <li>111-111-1111</li>
</ul>
</body>
</html>

<script>

    var html = document.getElementById("phone").innerHTML;

    if (navigator.platform.substr(0,2) === 'iP') {

        if (html.indexOf('tel:') == -1)
            alert('not safari browser');
        else
            alert('safari browser');
    }
    else
        alert('not iOS');
</script>
4
Amir Khorsandi

Notez que cette approche ne fonctionne pas pour iOS 10 et les versions antérieures.

Pour le printemps 2018, aucune des méthodes proposées ne fonctionnait pour moi. J'ai donc proposé une nouvelle approche (qui ne repose pas sur UserAgent):

const hasValidDocumentElementRatio =
  [ 320 / 454 // 5, SE
  , 375 / 553 // 6, 7, 8
  , 414 / 622 // 6, 7, 8 Plus
  , 375 / 812 // X
  , 414 / 896 // Xs, Xr
  ].some(ratio =>
    ratio === document.documentElement.clientWidth / 
      document.documentElement.clientHeight
  )

const hasSafariInUA = /Safari/.test(navigator.userAgent)

const isiOSSafari = hasSafariInUA && hasValidDocumentElementRatio  // <- this one is set to false for webviews

https://Gist.github.com/BorisChumichev/7c0ea033daf33da73306a396ffa174d1

Vous êtes également invités à étendre le code pour les appareils iPad également, je pense que cela devrait faire l'affaire.

A bien fonctionné pour les webviews Telegram, Facebook et VK.

2
Boris Chumichev

La solution de Neoneye ne fonctionne plus (voir commentaires) et peut être simplifiée ..__ D'autre part, tester uniquement "Safari" dans les adresses UA est bien plus important que les appareils de poche ios.

C'est le test que j'utilise:

var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
1
eosphere

Je suggérerais d'utiliser Modernizr et de rechercher Indexeddb comme this . Vous pouvez vérifier avec la configuration de l'agent utilisateur (appareil, système d'exploitation, navigateur, etc.), mais la détection de fonctionnalités pures semble plus recommandée.

1
jiku

La dernière fois que j'en ai eu besoin (JUST pour WebView), j'ai utilisé ce contrôle:

function isIOS() {
     return !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone';
}
0
CatalinBerta

Working 15.02.19

Une autre solution pour détecter les vues Web sur iOS est de rechercher le support/l'existence de navigator.mediaDevices.

if (navigator.mediaDevices) {
    alert('has mediaDevices');
} else {
    alert('has no mediaDevices');
}

Dans mon cas, je n'ai pas besoin de capturer toutes les vues Web, mais celles qui ne prennent pas en charge l'entrée caméra/microphone (rappel: les alertes ne se déclenchent pas dans la vue Web, assurez-vous donc de modifier quelque chose dans le domaine à des fins de débogage)

0
vinni

Je sais que ce code vérifiera s'il est accessible à partir d'une icône ajoutée à l'écran d'accueil:

if (window.navigator.standalone == true) {
//not in safari
}

mais je ne sais pas comment il réagirait dans un UIWebView. La seule autre solution à laquelle je puisse penser consiste à obtenir l'agent utilisateur ou à utiliser - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType et à remplacer la chaîne de requête de la page à laquelle vous accédez par quelque chose que la page utilise pour identifier l'accès depuis une vue Web.

0
Preston

J'ai trouvé une solution simple pour détecter un iPhone ou un iPad. Cela fonctionne bien pour moi.

var is_iPad = navigator.userAgent.match(/iPad/i) != null;
var is_iPhone = navigator.userAgent.match(/iPhone/i) != null;
    if(is_iPad || is_iPhone == true){
        //perform your action
    }
0
Vijay Dhanvai