codememo

시스템 브라우저의 Ionic 응용 프로그램 열기 링크

tipmemo 2023. 2. 22. 21:57
반응형

시스템 브라우저의 Ionic 응용 프로그램 열기 링크

예를 들어 safari의 ios나 Android chrome(디폴트브라우저에 관계없이)의 링크를 시스템브라우저로 열고 싶습니다.

문제가 되고 있는 것은 시스템브라우저에서는 링크가 열리지만 어플리케이션에서도 열립니다.시스템 브라우저에서만 링크를 열고 앱 내에서 링크를 열지 않았으면 합니다.

이건 내 암호야

<a ng-href="http://example.com/login/{{user._id}}" onclick="window.open(this.href, '_system', 'location=yes')" class="ion-home color-primary item"> Dashboard</a>

ID도 내 엔드포인트에 전달한다는 점에 주의해 주세요.

해라

<a class="ion-home color-primary item" href="#" onclick="window.open('http://example.com/login/{{user._id}}', '_system', 'location=yes'); return false;"> Dashboard</a>

최신(3.0) 버전에서는 App Browser Plugin이 더 나은 솔루션입니다.

<button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

open Webpage 메서드는 다음과 같습니다.

 openWebpage(url: string) {
        const options: InAppBrowserOptions = {
          zoom: 'no'
        }

        // Opening a URL and returning an InAppBrowserObject
        const browser = this.inAppBrowser.create(url, '_self', options);

       // Inject scripts, css and more with browser.X
      }

이 작업은 InAppBrowser 플러그인 https://cordova.apache.org/docs/en/3.0.0/cordova/inappbrowser/inappbrowser.html에서 수행할 수 있습니다.

어떤 이유로 플러그인을 사용하고 싶지 않은 경우, 유사한 질문에 대한 답변을 확인하십시오.https://stackoverflow.com/a/30397786/1630623

편집: 이미 플러그인을 사용하고 있는 경우 온클릭 코드를 제거하고 다음을 추가해야 할 수 있습니다.target="_system"또는 추가event.preventDefault();온클릭 핸들러에서

캐패시터에는 인앱브라우저를 기동하기 위한 사용하기 쉬운 플러그인이 있습니다.

https://capacitorjs.com/docs/apis/browser

설치:

npm install @capacitor/browser
npx cap sync

사용방법:

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
    await Browser.open({ url: 'http://capacitorjs.com/' });
};

심플한 솔루션

<a href="#" onclick="window.open('https://www.badhaobusiness.in',
     '_system', 'location=yes'); return false;"> www.badhaobusiness.in</a>

동작에서 이 방법 사용다른 브라우저에서 링크를 여는 시트:

import { ActionSheetController} from '@ionic/angular';

...
constructor(public actionSheet: ActionSheetController) {}

async presentActionSheet() {
 const action = await this.actionSheet.create({
  buttons: [{
    text: 'Open link',
    icon: 'link-outline'
    handler: () => {
      window.open('http://google.com');
     }
    }]
  });
   await action.present();
 }
}

언급URL : https://stackoverflow.com/questions/35562745/ionic-application-open-link-in-system-browser

반응형