javascript - Load external url inside ion-content - Stack Overflow

admin管理员组

文章数量:1356142

I am using ionic 1 and i want to load an external url inside ion-content (like the Messenger app does) i have already tried cordova-plugin-inappbrowser but it loads the url in a new page.

This is the code i've used:

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

I also tried embedding the url inside iframe but it refused to display since the url is not not mine.

This is what i wrote <iframe src="{{item.url | trustUrl}}"></iframe>

any help will be appreciated :)

I am using ionic 1 and i want to load an external url inside ion-content (like the Messenger app does) i have already tried cordova-plugin-inappbrowser but it loads the url in a new page.

This is the code i've used:

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

I also tried embedding the url inside iframe but it refused to display since the url is not not mine.

This is what i wrote <iframe src="{{item.url | trustUrl}}"></iframe>

any help will be appreciated :)

• javascript
• cordova
• ionic-framework

Share Improve this question Follow asked Dec 18, 2017 at 12:02 Souhail Ben SlimeneSouhail Ben Slimene 66899 silver badges1515 bronze badges 5

• Want that feature too in app any process done ? – Anuj Commented Jan 17, 2018 at 11:26
• @Anuj I found this cordova plugin ThemeableBrowser it does what we want but it's a bit ugly and i didn't see if i can override it's style. hope you find it useful. – Souhail Ben Slimene Commented Jan 17, 2018 at 21:11
• hi buddy,thanks for the msg. i did it by iframe (in html)and DomSanitizer (npm for ts) now it is working fine . – Anuj Commented Jan 18, 2018 at 9:42
• then i should try it sometime – Souhail Ben Slimene Commented Jan 18, 2018 at 11:20
• check my answer and if helpful then upvote and close your question, Thanks – Anuj Commented Jan 18, 2018 at 12:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I tried it with i frame and domsanitizer My Html is

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

and my ts is

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

}

Try this .

本文标签： javascriptLoad external url inside ioncontentStack Overflow