2017-12-18 13 views
1

이온 1을 사용하고 있습니다. 메신저 앱처럼 이온 내용물 내부에 외부 URL을로드하고 싶습니다. 나는 cordova-plugin-inappbrowser를 이미 시도했지만, URL을로드합니다. 새로운 페이지. 이온 내용 안에 외부 URL로드

내가 사용했던 코드 :

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

나는 또한 iframe을 내부 URL을 삽입 시도했지만 URL이 광산하지하지 않기 때문에 표시하지 않았다.

내가 어떤 도움이 이해할 수있을 것이다 <iframe src="{{item.url | trustUrl}}"></iframe>

:

+0

응용 프로그램에서 해당 기능을 수행하고 싶습니까? – Anuj

+0

@Anuj 나는이 cordova 플러그인 [ThemeableBrowser] (https://github.com/initialxy/cordova-plugin-themeablebrowser)을 발견했다.하지만 우리가 원하는 것은 수행하지만 약간 추악하고 스타일을 무시할 수 있는지를 보지 못했다. . 유용하다고 생각하길 바랍니다. –

+0

안녕하세요, msg에 감사드립니다. 나는 iframe (html로)과 DomSanitizer (ns for ts)로 해냈습니다. 이제는 정상적으로 작동합니다. – Anuj

답변

0

내가 프레임 내 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> 

입니다 domsanitizer 내 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(); 
     } 
    } 

} 

시도해보십시오.