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 
  • No se puede eliminar la imagen en div contenteditable en Android
  • ¿AlertDialog admite WebView?
  • Cómo mejorar el rendimiento de JS menú arrastrar en WebView en Android
  • Android detecta cambio de URL de webview
  • En appcelerator / titanium mobile, al usar html local en una vista web, ¿cómo puedo cargar una imagen desde y hacer referencia al directorio de datos de la aplicación
  • Respuesta HTTP POST en WebView en android
  • Uso de shadow-dom (Polymer) en Android 4.4 Webview
  • Cómo cargar una imagen almacenada en una matriz de bytes a WebView?
  • Abrir cuadro de diálogo personalizado en la selección de texto de la vista web
  • Videos que no se reproducen en modo de pantalla completa
  • Obtener valor href de la etiqueta de anclaje en Android WebView cuando se hace clic en el enlace
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.