web-dev-qa-db-ja.com

ionicタブ内にWebサイトを表示します

私はionic=フレームワークベースのモバイルアプリケーション（主にAndroidを対象としています）に取り組んでいます。私のプロジェクトはタブベースのアプリケーションです。最初のタブで、外部Webサイトをロードしたいのですが、それを行う方法を理解します。

NgCordova InAppBrowserを試しましたが、全画面表示になり、ナビゲーションタブが遅れます。

私もiFrameをロードしてみましたが、シミュレーターで機能しますが、このソリューションはAndroidデバイスでは機能せず、空のiFrameを表示します（その位置の制限の横にあると、整理できると思います） cssを使用）。

不足しているものはありますか？なにか提案を？

最終的なアプリは（そのネイティブiOSバージョン）のようになります。 Sample Output Design

cordovaphonegap-pluginsionic-frameworkinappbrowser
15
Shahab

なんとかiFrameを使って解決しました。

Ajax .load()を使用すると、メタデータのロードなどの問題が発生します。 iFrameを使用するには、<access Origin="yourwebsite.com/*"/>を追加する必要があります。また、Android MainActivity on Create on this（ソースが見つかりません ソース： Android Phonegapを使用するアプリが機能しない ）のiframe：

@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

Iframeを介してページ全体ではなく、ajaxを介してWebサイトからコンテンツをロードしてみてください。これは次のようにすることで実現できます。

最初に、ページを表示する場所に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());   
  }
});
5
Sithys