在離子內容中加載外部網址

我使用的是離子1，我想在離子內容中加載外部網址（如Messenger應用程序所做的那樣）我已經嘗試了cordova-plugin-inappbrowser，但它加載了url一個新的頁面。在離子內容中加載外部網址

這是我所使用的代碼：

cordova.InAppBrowser.open(item.url, '_self');

我也試過裏面嵌入iframe中的URL，但它拒絕顯示，因爲URL是不不是我的。

這是我寫的<iframe src="{{item.url | trustUrl}}"></iframe>

任何幫助將不勝感激:)

來源

2017-12-18 Souhail Ben Slimene

要在應用程序的任何過程中完成該功能嗎？ – Anuj

@Anuj我發現這個科爾多瓦插件[ThemeableBrowser]（https://github.com/initialxy/cordova-plugin-themeablebrowser）它做我們想要的，但它有點難看，我沒有看到我是否可以重寫它的風格。希望你覺得它有用。 –

嗨，兄弟，謝謝你的味精。我做了iframe（在html中）和DomSanitizer（npm爲ts）現在它工作正常。 – Anuj

我用我試了一下框架和domsanitizer我的HTML是

<ion-header> 
    <ion-navbar color="danger"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Payments Detail</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <iframe width="100%" height="100%" [src]="myurl" frameborder="0" allowfullscreen></iframe> 
</ion-content>

和我的TS是

import { Component } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 
import {DATA} from "../../app/config"; 
import {NavParams, ToastController} from "ionic-angular"; 
import {Network} from "@ionic-native/network"; 


@Component({ 
    templateUrl: 'paymentDetail.html' 
}) 
export class PaymentDetail { 
    myurl:any=""; 
    constructor(private network: Network,private toastCtrl: ToastController,private sanitizer: DomSanitizer,public navParams: NavParams) { 

    } 
    ngOnInit() { 
     if(this.network.type !="none"){ 
     console.log(this.navParams.get("payment")); 
     this.myurl=this.sanitizer.bypassSecurityTrustResourceUrl(DATA["API_BASE_URL2"]+"userpage/RedirectNow?id="+this.navParams.get("payment")); 
     }else { 
      let toast = this.toastCtrl.create({ 
       message: "check your internet connection before process", 
       duration: 2000, 
       position: 'middle' 
      }); 
      toast.present(); 
     } 
    } 

}

試試這個。

來源

2018-01-18 12:48:47 Anuj

在離子內容中加載外部網址

回答

相關問題