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

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 
  • Android: guarda el nombre de usuario y la contraseña de WebView (como Google Chrome)
  • Cargar archivo local y obtener Error cromo desconocido: -6
  • El zoom de la vista de la Web no se enfoca y el niño ve los botones
  • Congelar o crear una vista Web estable al seleccionar la barra de acción Volver? Impedir Cargar / recargar cada vez
  • Accede a la cabecera de respuesta y al código de estado en la web en la aplicación para Android?
  • Creando WebView desde Chromium para Android
  • Vista Web de Android (Phonegap): Desactivar Autocorrección, Autocapitalización y autocompletar no funciona
  • Android WebView no carga una URL HTTPS
  • Webview dentro de RecyclerView está mostrando pantalla en blanco a veces en los dispositivos de turrón solamente
  • Cómo cargar cadena html en una vista web?
  • Html de Webview Hacer clic en el botón de detección en la actividad (código java)
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.