Apri URL in Webview - PhoneGap - Biblioteca eccellente

Mi piacerebbe sapere come posso aprire un url nel contesto dell'app della webview di incorporamento. Attualmente questa demo aprirà una nuova scheda in un browser esterno, quindi, non è quello che mi aspetto. Sto usando google.com solo per i test.Apri URL in Webview - PhoneGap

Riassunto, sto cercando una demo funzionale.

<?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>

Aggiornamento: completo file xml: https://codeshare.io/Vw3Fl

fonte

2016-01-29 user2990084

1. Il codice che hai non funzionerà mai. 2. Se stai aprendo un URL esterno in modo che la tua app funzioni come un wrapper del sito web, la tua app potrebbe essere respinta dagli app store. Un errore comune con Cordova/PhoneGap è [Quando si progetta l'app, si pensa che PhoneGap funzioni come un sito Web o un browser.] (Https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap .md # 005) – JesseMonroy650

@jcesarmobile attualmente il problema è SO. window.open con InAppBrowser funziona perfettamente in Android, e la tua risposta funziona anche. Comunque entrambi fallirono in iOS. In iphone sto ricevendo una pagina bianca quando dovrei aprire la webview. – user2990084

prova:

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

invece di:

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

Questa utilizzerà l'InAppBrowser, e utilizzare _self come bersaglio.

fonte

2016-02-02 07:03:36

grazie. apparentemente funziona per Android, ma non per IOS. – user2990084

@user, lo uso quotidianamente su iOS)) –

Puoi confermare la versione IOS per favore? – user2990084

Potrebbe essere necessario aggiungere quanto segue al PhoneGap file xml:

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

fonte

2016-01-29 17:25:46 ApolloSoftware

grazie, ma senza successo. stesso problema – user2990084

Un modo molto semplice per aprire la pagina nel browser di sistema in un'applicazione phonegap è di rendere quella pagina in un iframe.

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

È possibile modificare l'URL nell'iframe utilizzando l'aggiornamento dom.

Questo verrà caricato nella pagina nel browser di sistema nativo.

fonte

2016-02-01 12:30:45

si deve aggiungere questa riga sul config.xml per consentire la navigazione a URL esterni

<allow-navigation href="*" />

Questo permetterà la navigazione a qualsiasi URL esterno, se si desidera solo per consentire l'esplorazione di google quindi aggiungere questo linea

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

È possibile controllare il resto della documentazione on the plugin page

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

fonte

2016-02-01 13:41:20 jcesarmobile

Per coloro che hanno questo problema durante l'utilizzo di Phonegap 6.3.1, è necessario inserire correttamente gli URL nella whitelist e utilizzare cordova-plugin-inappbrowser plugin.

Continuate a leggere per sapere come fare.

Per prima cosa, assicurarsi di avere inserito nella lista bianca gli URL che si desidera aprire. Puoi farlo aggiungendoli agli hrefs dei tag <access>, ai tag <allow-intent> e ai tag allow-navigation nel file config.xml nella radice del progetto. Qualcosa liek th:

<?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>

(Nota:. Il "*" nelle HREF di cui sopra permette l'apertura di qualsiasi URL/percorso Nella produzione, probabilmente si vuole limitare a determinati URL/percorsi)

Successivo , nel tuo indice.file HTML, aggiungere il seguente javascript:

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

Questo script utilizza il plugin cordova-plugin-inappbrowser, che, se si è generato l'applicazione utilizzando il modello standard di PhoneGap, dovrebbe essere già incluso nel file config.xml.

Lo script attende che il dispositivo sia pronto, quindi utilizza cordova-plugin-inappbrowser plugin per aprire l'URL specificato. Il parametro '_self' significa che apre la pagina nella webview di Phonegap e lo 'location=no' significa che non ci sarà alcuna barra degli indirizzi. Per le altre opzioni dei parametri, consultare la documentazione del plugin cordova-plugin-inappbrowser (link sopra).

Infine, per testare l'applicazione negli emulatori appropriati (ammesso che abbiate la Phonegap CLI installato), eseguire il seguente comando (s):

phonegap run ios --verbose --stack-trace 
phonegap run android --verbose --stack-trace

fonte

2016-09-14 15:04:29

installare il seguente plugin digitando questi comandi nella directory del progetto

phonegap plugin add cordova-plugin-whitelist 
phonegap prepare

quindi aggiungere il seguente seguenti tag in 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>

fonte

2018-01-29 10:03:59

Apri URL in Webview - PhoneGap

risposta

Problemi correlati