如何使用 WebView 加载 Google Play 页面？

Question

我使用 Ionic 3。此代码适用于其他网站，但对于 Google Play 的 url，它不起作用。如何使用 WebView 加载 Google Play 页面？

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';

declare var navigator: any;
declare var Connection: any;

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

export class HomePage {
    Connection: any;
    isLaunch: Boolean = false;

    constructor( private platform: Platform, private iab: InAppBrowser) {
        this.platform.ready().then(() => {
            this.launch();
        });

    }

    launch() {
        this.isLaunch = true;
        const browser = this.iab.create('https://play.google.com','_self' , "location=yes");

        browser.show();
    }
    }

 <ion-content>
    <iframe width='100%' height='100%'
    src="https://play.google.com/" frameborder="0" allowfullscreen>
   </iframe>
  </ion-content>

提前谢谢你。

Answer 1

我使用in-app-browser 模块在应用程序中加载我的网页。 以下代码我编写以在应用程序中显示网页。

  import {Component} from '@angular/core';
  import {NavController, Platform} from 'ionic-angular';
  import { InAppBrowser } from '@ionic-native/in-app-browser';

  declare var navigator: any;
  declare var Connection: any;

  @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
  })
  export class HomePage {
      Connection: any;
      isLaunch: Boolean = false;

      constructor( private platform: Platform, private iab: InAppBrowser) {
          this.platform.ready().then(() => {
              this.launch();
          });

      }

      launch() {
          this.isLaunch = true;
          const browser = this.iab.create('https://play.google.com','_self' , "location=yes");

          browser.show();
      }
  }

<ion-content>

  <div #frame style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important"> 
    <iframe [src]="https://play.google.com" class="iframe" scrolling="yes" ></iframe> </div>
  
</ion-content>

Answer 2

你不能这样做。

您正尝试从不同域名的框架中加载 Google Play。如果 Google 允许这样做，这将是一个很大的安全风险，例如，它可能会让您诱使用户在他们认为他们正在点击 Play 时点击您的网站。

为了防止这种情况，Google 和其他网站使用“X-FRAME-OPTIONS”标头设置为“SAMEORIGIN”。这告诉浏览器不允许将其放入 iframe 中，除非源 URL 也来自 play.google.com。许多其他网页也这样做。如果你在 chrome 中打开 play.google.com 可以看到这一点，并使用开发者工具查看请求的 header。