顯示離子選項卡內的網站

我正在研究基於離子框架的移動應用程序（主要針對Android）。我的項目是基於標籤的應用程序。在第一個標籤中，我想加載一個外部網站，但我無法弄清楚如何去做。顯示離子選項卡內的網站

我試過ngCordova InAppBrowser，但它需要全屏幕和我的導航選項卡落後。

我也嘗試加載一個iFrame，它在模擬器中工作，但這個解決方案根本不能在Android設備上工作，並顯示一個空的iFrame（除了它的定位限制，我認爲我可以使用css進行分類）。

有什麼我失蹤？任何建議？

最終的應用程序應該看起來像（其原生的iOS版本）： Sample Output Design

來源

2015-04-22 KiNG

網站列入白名單？ – Flatlineato

是@Flatlineato – KiNG

有什麼方法可以在應用程序的一部分中加載InAppBrowser？！ – KiNG

我設法使用iFrame解決它。

使用ajax有加載元數據的問題。要使用iFrame，您應該添加<access origin="yourwebsite.com/*"/>。此外，你應該改變你的Android MainActivity上創建像這樣（ ~~我無法找到來源~~ 來源：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); 
}

來源

2015-05-03 12:24:34 KiNG

有沒有純粹的離子方式？ –

@KiJéy此解決方案不再適用於最近版本的離子。我不確定（不記得！），但我認爲問題已經消失。 – KiNG

問題沒有消失，我目前正在用iFrame解決它，但它似乎很髒！ –

嘗試通過AJAX，而不是通過iframe的整個頁面加載從網站上的內容。你可以通過這樣做來達到這個目的：

你首先要把div放到那個你想要顯示頁面的地方。

HTML：

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

而且在你的JavaScript通過Ajax或jQuery的獲取代碼，你得到它後，你會與代碼來填充DIV：

JS ：

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

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

來源

2015-04-22 14:03:36 Sithys

謝謝@Sithys，我想到了這種方法。但是，我認爲遠程頁面上的JS文件不會以這種方式運行（如Google Analytics）。我對嗎？如果是這樣，你能提出任何解決方案嗎？ – KiNG

谷歌分析可通過插件。我發佈的方法僅適用於您想要在網站上顯示的頁面。你想使用該網站的功能嗎？ – Sithys

該網站是http://Bazar360.com。正如你所看到的，它沒有重要的JS，甚至jQuery。但是，當我嘗試這種方法時，我打了http://en.wikipedia.org/wiki/Same-origin_policy： - /我設法繞過了jQuery，但它不適用於設備。它真的令人沮喪，所以我正在考慮轉移到本地......： -/ – KiNG

顯示離子選項卡內的網站

回答

相關問題