2016-10-26 7 views
3

_blankinappbrowser pluginというターゲットを使用して開いているコードバーアプリに「外部」アンカーリンクがあります。これにより、ネイティブアプリの「上」にアプリ内のインスタンスが開きます。これらは一般的に当社のWebベースのサポートサイトへのリンクです。ユーザーがinappbrowserにおける当社のサポートサイト上にあるときinappbrowser内の_blankリンクを開く

は今、私たちは、標準target="_blank"を使用するサードパーティのサイトへのリンクを持っています。しかし、ユーザはinappbrowserの新しいインスタンスを開いたり、systemブラウザインスタンスを開いたりすることはありませんが、孤独なインスタンス内のインスタンスは、サポートサイトからサードパーティのサイトに移動します。

予想通りtarget="_blank"仕事とinappbrowserの振る舞いを持っている任意の方法は?

+0

万が一あなたがこれを見ていたんでしたリンク - http://stackoverflow.com/questions/37652869/opening-two-instances-of-inappbrowser-system-and-blank-prevents-events-from InAppBrowserプラグインの複数のインスタンスを開きます。 – Gandhi

答えて

3

InAppBrowserが設計されていたようなので、あなたの唯一の選択肢は、システムブラウザ上で外部リンクを開くことで、それの唯一のインスタンスがあります。 あなたはloadstartイベントをリッスンし、URLが自分のドメインが含まれていない場合は、システムブラウザ上でそれを開き、このようなものができます。

var browserRef = window.cordova.InAppBrowser.open('http://www.yourdomain.com/support', '_blank'); 

browserRef.addEventListener('loadstart', function(event) { 
    if((event.url).indexOf('www.yourdomain.com') === -1) { 
     window.cordova.InAppBrowser.open(event.url, '_system'); 
    } 
}); 

しかし、私はそれは外部のロードも避けることができますとは思いませんinAppBrowserウィンドウ上のサイトで、あなたもが部分的にしか機能しjcesarmobileによってinAppBrowser

browserRef.addEventListener('loadstop', function(event) { 
    browserRef.executeScript({ code: 'window.history.back();' }, null); 
}); 
2

答えに、前のページに戻るには、JavaScriptを注入する必要がありますので。

あなたは_SYSTEMのInAppBrowserを開くと、browserRefへの参照が「loadstart」と「loadstop」にマッピングされたイベントと一緒に、失われます。これは、InAppBrowserの非常に悪い動作です。彼らがそれを修正しようとしているのかどうかは分かりません。私はsubmitted an issueを持っています。

他の言葉で言えば、これは最初の外部リンクのの場合にのみ機能します。

さらに、ページのロードはもう同じように動作しません。これまでに見つけた非常に洗練されていない解決策は、 "_システム"ブラウザを起動した後に "_blank"ブラウザを再インスタンス化することでした。しかし、そのためには、以前のURLで新しいInAppBrowserを起動できるようにナビゲーション履歴を保存する必要があります。

以下のコードは私のために動作しますが、時には新しいInAppBrowserは表示されませんし、私はその理由を調査しています。

LIBS: "イオン-ネイティブ": "2.2.11" "typescriptです": "2.0.9"

import { Component } from '@angular/core'; 
 
import { InAppBrowser, Splashscreen } from 'ionic-native'; 
 
import { Platform } from 'ionic-angular'; 
 
import 'rxjs/Rx'; 
 

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 
export class HomePage { 
 

 
    browser: InAppBrowser; 
 
    sysBrowser: InAppBrowser; 
 
    urlHistory: string[] = []; 
 
    url: string; 
 

 
    constructor(public platform: Platform) { 
 
    this.platform = platform; 
 
    this.url = 'http://www.yourdomain.com/support'; 
 
    } 
 

 
    ionViewDidLoad() { 
 
    this.platform.ready().then(() => { 
 
     this.browser = new InAppBrowser(this.url, '_blank', 'location=no,zoom=no,hidden=no'); 
 
     this.urlHistory.push(this.url); 
 
     this.addEventsToBlankBrowser(); 
 
    }); 
 
    } 
 

 
    addEventsToBlankBrowser() { 
 
     this.browser.on('loadstart').subscribe(
 
     event => { 
 
      if (event.url.indexOf('www.yourdomain.com') === -1) { 
 
      let previousUrl = this.urlHistory.pop(); 
 
      this.browser.executeScript({ code: 'window.location.href = "' + previousUrl + '";' }); 
 
      this.sysBrowser = new InAppBrowser(event.url, '_system'); 
 
      this.url = previousUrl; 
 
      this.urlHistory.push(previousUrl); 
 
      this.browser = new InAppBrowser(previousUrl, '_blank', 'location=yes,zoom=no,hidden=no'); 
 
      this.browser.show(); 
 
      this.addEventsToBlankBrowser(); 
 
      } else { 
 
      this.url = event.url; 
 
      this.urlHistory.push(event.url); 
 
      } 
 
     } 
 
    ); 
 
    } 
 
}

+0

あなたのソリューションは動作しているようですほとんど完璧で、言及する必要があるのは2つの側面だけです: - ユーザーがアプリケーションに戻ったときに、メインページが再読み込み/再起動するため、フォーム値、アニメーションなどの処理に細心の注意を払う必要があります。 - 古い/以前のInAppBrowserウィンドウがまだどこかにあるので、使用するたびに、アプリはメモリ内に展開されます... 今のところ、私はそれが最善の解決策だと思います – qdev

関連する問題