[英]How do i make a clickable & open in an external browser in Ionic
I made a Qr code scanner using ionic.我使用 ionic 制作了一个二维码扫描仪。 When I scan links, they aren't clickable.
当我扫描链接时,它们不可点击。 How do I make them clickable and open them in an external browser?
如何使它们可点击并在外部浏览器中打开它们?
The code is provided below:代码如下:
home.page.html:主页.html:
<ion-header>
<ion-toolbar color="primary" >
<ion-title>
QR Scanner
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>Result :</ion-card-header>
<ion-card-content>
<ion-item *ngIf="scannedCode">
{{ scannedCode }}
</ion-item>
<ion-button (click)="scanCode()" fill="outline" id="btn-enter" size="default" ><ion-icon name="qr-code-outline" slot="start"></ion-icon>
Scan Again</ion-button>
</ion-card-content>
</ion-card>
</ion-content> ```
home.page.ts file: home.page.ts 文件:
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'
import { NavController } from '@ionic/angular';
import { NullVisitor } from '@angular/compiler/src/render3/r3_ast';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
scannedCode: string="";
constructor(private barcodeScanner : BarcodeScanner,
private navCtrl : NavController) {}
scanCode(){
this.barcodeScanner.scan().then(
barcodeData => {
this.scannedCode = barcodeData.text;
}
)
}
ngAfterViewInit(){
this.scanCode();
}
}
Use: In App Browser Plugin.使用:在应用浏览器插件中。 https://ionicframework.com/docs/native/in-app-browser
https://ionicframework.com/docs/native/in-app-browser
When your scanning completes pass that URL to to your in app browser function.当您的扫描完成后,将 URL 传递到您的应用浏览器 function。 eg:
例如:
import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';
export class HomePage {
options : InAppBrowserOptions = {
location : 'yes',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
hardwareback : 'yes',
mediaPlaybackRequiresUserAction : 'no',
shouldPauseOnSuspend : 'no', //Android only
closebuttoncaption : 'Close', //iOS only
disallowoverscroll : 'no', //iOS only
toolbar : 'yes', //iOS only
enableViewportScale : 'no', //iOS only
allowInlineMediaPlayback : 'no',//iOS only
presentationstyle : 'pagesheet',//iOS only
fullscreen : 'yes',//Windows only
};
constructor(private theInAppBrowser: InAppBrowser) {
}
openWithSystemBrowser(url : string){
let target = "_system";
this.theInAppBrowser.create(url,target,this.options); // this will open mobile browser;
}
}
Just use this就用这个
`openWithSystemBrowser(url: string) { `openWithSystemBrowser(网址:字符串){
let target = "_system";让目标=“_system”;
Window.open(url,target); Window.open(url,target);
// this will open mobile external browser; // 这将打开移动外部浏览器;
}` }`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.