在Ionic v2控制器中加载外部URL

Question

我想在不使用inAppBrowser的情况下在Ionic2控制器中渲染远程网页。

在线研究我发现了两种方法：

第一种方法

panorama.html

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

panorama.ts

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

      }
}

它不起作用......仅显示[object][object]

第二种方法

在模板中使用iframe：

<iframe ng-src="http://www.facebook.com"></iframe>

并在 config.xml

中

<allow-navigation href="*" />

但iframe始终为空白。

变得疯狂......

Answer 1

如果您遇到CORS错误，那么您将需要绕过这种或那种方式，一种方法是使用CORS代理，例如https://cors-anywhere.herokuapp.com/ 下面是我在HTML中加载到离子页面的工作代码

let proxyurl = "https://cors-anywhere.herokuapp.com/";
this.myVal = this.http
  .get(proxyurl + 'https://www.google.com')
  .map(response => response.text())
  .subscribe(
    function (data) {
      document.getElementsByTagName("ion-content")[0].innerHTML = data;
    }
);