Mostra un sito Web all'interno di una scheda ionica

Question

Sto lavorando su un'applicazione mobile basata su framework ionico (principalmente destinata ad Android). Il mio progetto è un'applicazione basata su schede. Nella prima scheda voglio caricare un sito Web esterno, ma non riesco a capire come farlo.

Ho provato ngCordova InAppBrowser, ma esso occupa tutto lo schermo e le mie schede di navigazione rimangono indietro.

Ho anche provato a caricare un iFrame e funziona nel simulatore, ma questa soluzione non funziona affatto su dispositivi Android e mostra un iFrame vuoto (oltre ai suoi limiti di posizionamento che penso di poter risolvere tramite css).

C'è qualcosa che mi manca? Qualche suggerimento?

L'applicazione finale dovrebbe assomigliare (La sua versione nativa iOS):

Answer 1

sono riuscito a risolvere utilizzando iFrame.

L'utilizzo di ajax .load() presenta problemi come il caricamento dei metadati. Per utilizzare iFrame, è necessario aggiungere <access origin="yourwebsite.com/*"/>. Inoltre, si dovrebbe cambiare il vostro MainActivity Android su Create come questo ( Non riesco a trovare fonte fonte: iframe for Android apps using Phonegap not working):

@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); 
} 

Answer 2

tenta di caricare i contenuti dal sito web tramite la tecnologia AJAX, non l'intera pagina tramite iframe. È possibile ottenere ciò attenendosi alla seguente procedura:

Per prima cosa si deve mettere un div in quel punto, dove si desidera visualizzare la pagina.

HTML:

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

E in JavaScript si recupera il codice tramite Ajax o jQuery e dopo averlo ricevuto, si sta andando a riempire il div con quel codice:

JS :

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

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