Ionic 离子应用程序在系统浏览器中打开链接

mfuanj7w  于 2023-05-27  发布在  Ionic
关注(0)|答案(7)|浏览(258)

我想在系统浏览器中打开链接,例如在iOS中的Safari和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到我的端点。

iecba09b

iecba09b1#

尝试

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

ecbunoof2#

在较新的(3.0)版本中,App Browser Plugin是更好的解决方案。

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

openWebpage方法是这样的

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
      }
bfhwhh0e

bfhwhh0e3#

您可以使用InAppBrowser插件https://cordova.apache.org/docs/en/3.0.0/cordova/inappbrowser/inappbrowser.html来完成此操作
如果你出于某种原因不想使用插件,看看我对类似问题的回答:https://stackoverflow.com/a/30397786/1630623
编辑:如果你已经在使用这个插件,你可能需要删除onclick代码并添加target="_system",或者在onclick处理程序中添加event.preventDefault();

bfrts1fy

bfrts1fy4#

Capacitor有一个易于使用的插件,用于启动应用内浏览器。

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/' });
};
gcmastyq

gcmastyq5#

简单的解决方案

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

bhmjp9jg6#

在ActionSheet中使用此方法在另一个浏览器中打开链接:

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();
 }
}
z9smfwbn

z9smfwbn7#

这是最简单的解决方案:

<a href="https://google.com/" target="_blank">google.com</a>

相关问题