Pokaż stronę internetową w zakładce jonowej

Question

Pracuję nad aplikacją mobilną opartą na platformie jonowej (głównie dla systemu Android). Mój projekt to aplikacja oparta na kartach. W pierwszej zakładce chcę załadować zewnętrzną stronę internetową, ale nie mogę wymyślić, jak to zrobić.

Próbowałem ngCordova InAppBrowser, ale zajmuje to cały ekran, a moje zakładki nawigacji pozostają w tyle.

Próbowałem także ładować iFrame i działa w symulatorze, ale to rozwiązanie nie działa na urządzeniach z Androidem i pokazuje puste iFrame (poza limitami pozycjonowania, które myślę, że mógłbym rozwiązać za pomocą css).

Czy jest coś, czego mi brakuje? Jakieś sugestie?

Ostateczna aplikacja powinna wygląda jak (natywnej wersji iOS):

Answer 1

Udało mi się go rozwiązać za pomocą iFrame.

Używanie ajax .load() ma problemy, takie jak ładowanie metadanych. Aby użyć iFrame, powinieneś dodać <access origin="yourwebsite.com/*"/>. Ponadto, należy zmienić swoją główną działalność na Android Tworzenie tak ( nie mogę znaleźć źródła źródło: 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

próbie załadowania treści ze strony internetowej za pośrednictwem ajax, a nie całej strony poprzez iframe. Możesz to osiągnąć, robiąc to następująco:

Najpierw wstawisz div do tego miejsca, w którym chcesz wyświetlić stronę.

HTML:

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

I w JavaScript Ci pobrać kod za pośrednictwem Ajax lub jQuery i po to masz, masz zamiar wypełnić div z tym kodem:

JS :

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

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