Abrir url en la vista web – phonegap

Me gustaría saber cómo puedo abrir una url en el contexto de la aplicación de incrustar webview. Actualmente esta demo abrirá una nueva pestaña en el navegador externo, así que no es lo que espero. Estoy usando google.com solo para probar.

Resumen, Estoy buscando una demo funcional.

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

Actualización: Archivo xml completo: https://codeshare.io/Vw3Fl

5 Solutions collect form web for “Abrir url en la vista web – phonegap”

tratar :

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

en lugar de :

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

Esto utilizará InAppBrowser y utilizará _self como destino.

Debe agregar esta línea en el config.xml para permitir la navegación a urls externas

 <allow-navigation href="*" /> 

Esto permitirá la navegación a cualquier URL externa, si sólo desea permitir la navegación a google, a continuación, agregue esta línea

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

Puede consultar el resto de la documentación en la página del complemento

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

Es posible que tenga que agregar lo siguiente a su archivo xml de phonegap:

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

Una forma muy sencilla de abrir la página en el navegador del sistema en una aplicación de separación telefónica es mediante la representación de esa página en un iframe.

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

Puede cambiar la URL en el iframe mediante dom update.

Esto se cargará en la página en el navegador del sistema nativo.

Para aquellos que tienen este problema mientras se utiliza Phonegap 6.3.1, debe whitelist las urls correctamente y utilizar el complemento cordova-plugin-inappbrowser .

Siga leyendo para saber cómo hacer esto.


En primer lugar, asegúrese de que ha incluido en la lista blanca las URL que desea abrir. Para ello, añádalos a las hrefs de <access> etiquetas <access> , <allow-intent> y las etiquetas allow-navigation en el archivo config.xml en la raíz del proyecto. Algo parecido a:

 <?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: el "*" en el anterior hrefs permite la apertura de cualquier url / path.En la producción, es probable que desee restringir a ciertas urls / caminos)

A continuación, en su archivo index.html, agregue el siguiente 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> 

Este script utiliza el complemento cordova-plugin-inappbrowser, que, si generó su aplicación usando la plantilla estándar de Phonegap, ya debería estar incluido en su archivo config.xml.

El script espera que el dispositivo esté listo, luego usa el plugin cordova-plugin-inappbrowser para abrir la url dada. El parámetro '_self' significa que abre la página en la vista web Phonegap y la 'location=no' significa que no habrá barra de direcciones. Para otras opciones de parámetros, consulte la documentación del complemento cordova-plugin-inappbrowser (enlace anterior).

Por último, para probar la aplicación en los emuladores adecuados (suponiendo que tenga instalada la CLI de Phonegap ), ejecute los siguientes comandos:

 phonegap run ios --verbose --stack-trace phonegap run android --verbose --stack-trace 
  • Establecer cookies de forma programática en Crosswalk WebView en Android
  • Reproducción de vídeo local en WebView en Android
  • WebView no cambia de tamaño
  • Falta el nombre de archivo para openFileChooser Android 4.4.4
  • De ancho: 100% en CSS no bien renderizado en Android 4.4
  • Android WebView JellyBean -> No debería suceder: no se encontraron nodos de pruebas basadas en rect
  • Android WebView no cargar contenido mixto
  • ¿AlertDialog admite WebView?
  • Android WebView con caracteres UTF-8 ilegibles.
  • ¿Por qué mi WebView no llena el ancho completo de mi pantalla?
  • ¿Cómo cambiar el tamaño del contenido de una webview en android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.