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

Claus 发表于 Dev

克劳斯

我想在不使用 inAppBrowser 的情况下在我的 Ionic2 控制器中呈现一个远程网页。

网上查了一下，有两种方法：

第一种方法

全景图.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>

全景图

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 总是空白的。

变得疯狂...

加勒特巴洛克

如果您遇到 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;
    }
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。