Load remote page into ionic controller

Ionic Framework ionic-v3
1

I want to render a remote web page inside my Ionic2 controller without using the internalWebBrowser.

Researching online I found two methods:

FIRST METHOD

template

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
      <ion-title>Panorama</ion-title>
  </ion-navbar>
</ion-header>
<ion-content overflow-scroll="true">
  <div>
      <div [innerHTML]="myVal"></div>

  </div>

</ion-content>

controller:

import { Component } from '@angular/core';
import { NavController,NavParams,Platform } from 'ionic-angular';
import {AlertController} from 'ionic-angular';
import { InAppBrowser } from 'ionic-native';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
import { Http, Headers, RequestOptions } from '@angular/http';

import 'rxjs/add/operator/map';

import { HttpModule } from '@angular/http';



@Component({
  selector: 'page-panorama',
  templateUrl: 'panorama.html'
})

export class PanoramaPage {

  myVal: any;

  constructor(public platform: Platform, public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController,public sanitizer: DomSanitizer,public http: Http) {

        this.myVal = this.http.get('http://www.facebook.com').map(response => response.text()).subscribe(html => this.myVal = html);
  
      }
}

it doesn’t work…shows just [object][object]

SECOND METHOD

using an iframe in the template:
<iframe ng-src="http://www.facebook.com"></iframe>

and in the config.xml

<allow-navigation href="*" />

but the iframe is always blank.

Getting crazy…

2

Wouldn’t this simply turn your app into a giant walking trojan?

2 Likes
3

What do you need Ionic for here? Wouldn’t a normal Cordova app be enough here?

4

let’s say I wanna create a feed reader and I want to display the website inside the app without using the InAppBrowser

5

Then I would suggest something along these lines.