web-dev-qa-db-fra.com

Ouvrir l'URL dans la vue Web - phonegap

Je voudrais savoir comment puis-je ouvrir une URL dans le contexte d'application de Webview incorporé. Actuellement, cette démo ouvre un nouvel onglet dans un navigateur externe, donc pas ce à quoi je m'attendais. J'utilise google.com uniquement pour les tests.

Résumé, je recherche une démo fonctionnelle.

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        xmlns:Android = "http://schemas.Android.com/apk/res/Android"
        id        = "com.xxx.xxxxx"
        version   = "1.0.0">

    <preference name="stay-in-webview" value="true" />

    <access Origin="*" browserOnly="true" subdomains="true" />

    <content src="index.html" />

    <allow-navigation href="https://google.com/*" />

    <gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />
    <gap:plugin name="org.Apache.cordova.inappbrowser" />
    <gap:plugin name="org.Apache.cordova.splashscreen" />

    <preference name="phonegap-version"           value="cli-5.4.1" />
    <preference name="permissions"                value="none"/>
    <preference name="target-device"              value="universal"/>
    <preference name="fullscreen"                 value="true"/>

</widget>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <div>
            <script type="text/javascript" charset="utf-8">
                document.addEventListener("deviceready", onDeviceReady, false);

                function onDeviceReady() {
                    window.location.href = 'https://google.com';
                }
            </script>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

Mise à jour: Fichier xml complet: https://codeshare.io/Vw3Fl

androidcordovawebviewphonegap-pluginsphonegap-build
14
user2990084

essayez:

window.open('https://google.com', '_self ', 'location=yes');

au lieu de :

window.location.href = 'https://google.com';

Cela utilisera InAppBrowser et utilisera _self comme cible.

18
tnt-rox

Vous devez ajouter cette ligne sur le fichier config.xml pour permettre la navigation vers des URL externes.

<allow-navigation href="*" />

Cela permettra la navigation vers n'importe quelle URL externe, si vous voulez simplement autoriser la navigation sur Google, ajoutez cette ligne.

<allow-navigation href="https://google.com" />

Vous pouvez consulter le reste de la documentation sur la page du plugin

https://github.com/Apache/cordova-plugin-whitelist

7
jcesarmobile

Pour ceux qui rencontrent ce problème lors de l’utilisation de Phonegap 6.3.1, vous devez répertorier correctement les URL et utiliser le plugin cordova-plugin-inappbrowser .

Lisez la suite pour savoir comment faire cela.

Tout d'abord, assurez-vous d'avoir ajouté à la liste blanche les URL que vous souhaitez ouvrir. Pour ce faire, vous les ajoutez aux fichiers hrefs des balises <access>, des balises <allow-intent> et des balises allow-navigation de votre fichier config.xml situé à la racine du projet. Quelque chose se passe:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
        xmlns="http://www.w3.org/ns/widgets"
        xmlns:gap="http://phonegap.com/ns/1.0">

    ...

    <access Origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

    ...

</widget>

(Remarque: le "*" dans les hrefs ci-dessus permet d'ouvrir n'importe quel URL/chemin. En production, vous souhaiterez probablement restreindre certaines URL/chemins)

Ensuite, dans votre fichier index.html, ajoutez le javascript suivant:

<script type="text/javascript">
    document.addEventListener('deviceready', function() {
        var url = 'https://www.google.com' // change to whatever you want
        cordova.InAppBrowser.open(url, '_self', 'location=no');
    }, false)
</script>

Ce script utilise le plugin cordova-plugin-inappbrowser, qui, si vous avez généré votre application à l'aide du modèle Phonegap standard, devrait déjà être inclus dans votre fichier config.xml.

Le script attend que le périphérique soit prêt, puis utilise le plugin cordova-plugin-inappbrowser pour ouvrir l'URL donnée. Le paramètre '_self' signifie qu'il ouvre la page dans la visualisation Web Phonegap et le 'location=no' signifie qu'il n'y aura pas de barre d'adresse. Pour d'autres options de paramètres, voir la documentation du plugin cordova-plugin-inappbrowser (lien ci-dessus).

Enfin, pour tester l’application dans les émulateurs appropriés (en supposant que la Phonegap CLI est installée), exécutez la ou les commandes suivantes:

phonegap run ios --verbose --stack-trace
phonegap run Android --verbose --stack-trace
1
Neil Atkinson

Vous devrez peut-être ajouter les éléments suivants à votre fichier XML phonegap:

<?xml version="1.0" encoding="UTF-8"?>
<phonegap>
    <access Origin="https://abcx.com" subdomains="true" />
</phonegap>
0
ApolloSoftware

installez le plugin suivant en tapant ces commandes dans votre répertoire de projet

phonegap plugin add cordova-plugin-whitelist
phonegap prepare

puis ajoutez les balises suivantes dans index.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
*{
    margin: 0px;
    padding: 0px;
 } body {width:100%;height:100%;margin:0;overflow:hidden;background-
 color:#252525;}
 #my_iframe{
  border: 0px;
  height: 100vh;
  width: 100%;
  }
  </style>
<title>ProjectName</title>
</head>

<body>
<iframe src="PUT_HERE_YOUR_PROJECT_URL" id="my_iframe" frameborder="0" width="100%" height="100%" >
</iframe>   
</body>

</html>
0
Ahmed Mahmoud

Un moyen très simple d'ouvrir une page dans le navigateur système d'une application phonegap consiste à rendre cette page dans un iframe.

<iframe src="http://www.google.com></iframe>

Vous pouvez modifier l'URL dans l'iframe à l'aide de dom update.

Cela se chargera dans la page du navigateur système natif.

0
Abhishek Jain