web-dev-qa-db-fra.com

Afficher un site Web dans un onglet ionic

Je travaille sur une application mobile basée sur le framework ionic (principalement ciblée pour Android). Mon projet est une application basée sur des onglets. Dans le premier onglet, je veux charger un site Web externe, mais je peux '' t comprendre comment le faire.

J'ai essayé ngCordova InAppBrowser, mais cela prend le plein écran et mes onglets de navigation prennent du retard.

J'ai également essayé de charger un iFrame et cela fonctionne dans le simulateur, mais cette solution ne fonctionne pas du tout sur les appareils Android et affiche un iFrame vide (à côté de ses limites de positionnement, je pense que je pourrais le trier) en utilisant css).

Y a-t-il quelque chose qui me manque? Toute suggestion?

L'application finale devrait ressembler à (sa version iOS native): Sample Output Design

cordovaphonegap-pluginsionic-frameworkinappbrowser
15
Shahab

J'ai réussi à le résoudre en utilisant iFrame.

L'utilisation d'ajax .load() a des problèmes comme le chargement des métadonnées. Pour utiliser iFrame, vous devez ajouter <access Origin="yourwebsite.com/*"/>. En outre, vous devez modifier votre Android MainActivity sur Create comme ceci (Je ne trouve pas la source source: iframe pour Android utilisant Phonegap ne fonctionnent pas ):

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    super.init();
    super.appView.setWebViewClient(new CordovaWebViewClient(this, super.appView) {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
}
3
Shahab

Essayez de charger le contenu du site Web via ajax, pas la page entière via iframe. Vous pouvez y parvenir en le faisant comme suit:

Vous allez d'abord mettre un div à cet endroit, où vous souhaitez afficher la page.

HTML:

<div id="loadExternalURL"></div>

Et en JavaScript, vous récupérez le code via Ajax ou jQuery et après l'avoir obtenu, vous allez remplir le div avec ce code:

JS:

/*jQuery*/
$('#loadExternalURL').load('http://www.google.com');

/*ajax*/
$.ajax({
  dataType:'html',
  url:'http://www.google.com',
  success:function(data) {
    $('#ajax').html($(data).children());   
  }
});
5
Sithys