Foro

Home Forums PhoneGap Iframes dentro de app con PhoneGap

This topic contains 11 replies, has 4 voices, and was last updated by mickdilon mickdilon 3 años, 1 mes .

Viendo 12 respuestas - de la 1 a 12 (de 12 en total)
  • Iframes dentro de app con PhoneGap

    Intervenciones
  • mickdilon
    mickdilon 
    Participant

    Amigos soy nuevo tocando la materia de PhoneGap, he checado en el foro algunos trucos del como visualizar paginas externas detro de la app de PhoneGap,
    estoy trabajando con un widget y lo tengo en un server, ya intente incrustarlo con un iframe y tambien aplicando jquery sobre un div, el codigo que implemente es algo asi:

    Alternativa 1:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.

    <script>  
      
      $(document).ready(function(){
            $("#content2").load("http://farmapiel.com/extremesun/clima/");
        });
      
      </script>  
      <div id="content2"> </div>

    Alternativa 2
    1.  <iframe src="http://stachethemes.com/demos/weather-widget-2/" frameborder="0" height="400" scrolling="auto"></iframe>
    Uds! conocen alguno otro tipo de incrustacion o tiene idea de que haga falta para hacer funcionar estos iframes o inyeccion sobre el div!, espero me puedan apoyar, excelente dia !!!.

    • This topic was modified 3 años, 1 mes by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes utilizar la opción de publicar código

    • This topic was modified 3 años, 1 mes by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes utilizar la opción de publicar código
    jcesarmobile 
    Participant

    Idependientemente de que uses el .load de jQuery o un iframe, lo que tienes que hacer para que te funcione es instalar el plugin whitelist y configurarlo para que permita hacer peticiones externas


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    mickdilon
    mickdilon 
    Participant

    Ok perfecto, voy a probar esa alternativa, solo tengo una duda, la descargo, la pego dentro mi repo de app y mando a llamar las librerias correspondientes?


    mickdilon
    mickdilon 
    Participant

    Estimado, ya le di un vistazo esta es la documentacion correcta, no hay que instalar nada todo se configura en config.xml


    jcesarmobile 
    Participant

    En iOS no hace falta instalarlo, en android si, y como no has dicho donde estás probando…


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    mickdilon
    mickdilon 
    Participant

    Mira así tengo mi Config.xml :

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.

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

    <name>ExtremeSun</name>

    <description>
    Test Extreme Sun
    </description>

    <author href="https://mickdilondesign.com" email="ingmiguelangelgc@gmail.com">
    Your Name
    </author>
    <access origin="*" launch-external="yes" />
    <access origin="http://farmapiel.com/extremesun/clima/" />
    <access origin="sms:*" launch-external="yes" />
    <access origin="geo:*" launch-external="yes" />
    <access origin="http://farmapiel.com/extremesun/clima/*" launch-external="yes" />
    <access origin="http://*" launch-external="yes" />
    <access origin="https://*" launch-external="yes" />
    <access origin="*" launch-external="yes" />
    <allow-navigation href="*" />

    <feature name="InAppBrowser">
        <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
    </feature>

    </widget>

    no se si sea correcto?

    • This reply was modified 3 años, 1 mes by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes usar la etiqueta code del foro para publicar código

    • This reply was modified 3 años, 1 mes by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes usar la etiqueta code del foro para publicar código
    jcesarmobile 
    Participant

    Usas phonegap build o phonegap CLI?


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    mickdilon
    mickdilon 
    Participant

    Estoy ocupando PhoneGap Build, practicamente genero zip y lo cargo a el compilador de PhoneGap Build, es correcto lo que estoy haciendo en config.xml?


    jcesarmobile 
    Participant

    Pues no está bien, la etiqueta feature justo se la cargaron ayer…

    http://phonegap.com/blog/2016/02/24/phonegap-build-confg-xml-now-required-and-other-updates/

    Elimina todo lo de feature y añade esta línea para añadir el plugin whitelist

    1.  <plugin name="cordova-plugin-whitelist" spec="~1" />

    Y esta para seguir usando el inAppBrowser

    1.  <plugin name="cordova-plugin-inappbrowser"/>


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    Luis Arellano
    Luis Arellano 
    Participant

    El tag <object> en html5 sirve como alternativa para el iframe

    http://codexexempla.org/articulos/2007/object_alternativa_iframe.php

    Saludos!


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola a todos!

    @mickdilon, primero de todo comentarte que debes usar la etiqueta “code” del foro para publicar código y que este se vea con un buen formato.

    1.- La documentación actual de todos (o casi todos) los plugins está actualizada en NPM, puedes ver la correspondiente a “whitelist” en esta url -> https://www.npmjs.com/package/cordova-plugin-whitelist

    2.- Es correcto como estás haciendo la subida a PhoneGap Build, aunque hay otras formas como desde la línea de comandos o incluso desde tu propio repositorio de Github. Lo importante es recordar que lo que debes subir es la carpeta “www” y el archivo “config.xml”.

    3.- Para que PhoneGap Build reconozca que plugins tiene que añadir a tu proyecto debes tener en cuenta algunas buenas prácticas. Puedes revisar como debes hacer estas referencias en la documentación del siguiente enlace -> http://docs.build.phonegap.com/en_US/configuring_plugins.md.html#Plugins

    Espero te sea de ayuda!

    PD: Olvídate de los iframes y comienza a trabajar con la carga de datos externas mediante Ajax dentro de elementos del DOM como los divs ;)


    mickdilon
    mickdilon 
    Participant

    Muchas gracias Jose Jesus, en mi proxima publicacion de codigo asi lo hare, y me sirvio mucho la info, poco a poco voyentendiendo mas, jcesarmobile funciono tu recomendacion tambien y funciona solo con iframes no con <object>, Luis Arellano, gracias por la recomendacion, funciono con iframe, por alguna razon con object no funciono.

    Muchas gracias amigos, en cuanto termine lapp la publicare aqui en PhoneGap Spain. mil gracias!!!, en su momento aportare tambien!!!


Viendo 12 respuestas - de la 1 a 12 (de 12 en total)

You must be logged in to reply to this topic.

RT @brian_d_vaughn: ⚛️ Library authors have often requested a way to log warnings that include the React "component stack". PR 15170 adds t…04:48 AM Mar 22nd