如何通过 IFRAME 在 IONIC APP 中嵌入网站？答案

【问题标题】：How to embed website via IFRAME in IONIC APP?如何通过 IFRAME 在 IONIC APP 中嵌入网站？
【发布时间】：2022-03-31 15:33:26
【问题描述】：

我正在尝试通过 IFRAME 将已开发的网站嵌入到 ionic 5 应用程序中。

该应用程序正在按预期显示网站，但是当我尝试使用登录表单时，没有任何反应，它只是重新加载页面并且没有消息没有登录...

你能帮帮我吗？

import {Component, OnInit} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

const URL = 'https://pusso.technokocc.fr' ;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{

  safeUrl: any ;

  constructor(private domSanit: DomSanitizer) {
    this.safeUrl = this.getSafeUrl() ;
  }

  getSafeUrl(){
    return this.domSanit.bypassSecurityTrustResourceUrl(URL) ;
  }

  ngOnInit(): void {
    this.safeUrl = this.getSafeUrl() ;
  }

  ionViewWillEnter(){
    this.safeUrl = this.getSafeUrl() ;
  }

}

ion-content div.scroll{
  height: 90%;
}

.webPage{
  width: 100%;
  height: 100%;
  background-color: transparent;
  overflow: hidden ;
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Pusso
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <iframe class= 'webPage' frameborder="0" name="eventsPage" [src]="safeUrl" allowfullscreen>
  </iframe>
</ion-content>

【问题讨论】：

标签： ionic-framework ionic5

【解决方案1】：

Ionic 团队说，I would not suggest using an iframe.

https://forum.ionicframework.com/t/right-approach-to-embed-third-party-web-application-into-ionic-mobile-app/192153/6

我不能完全理解这个原因。但我猜 iframe 会导致意想不到的问题。

如果您不必保留页脚或页眉，您可以试试这个。它看起来像模态的。

Cordova-in-app-browser

https://ionicframework.com/docs/native/in-app-browser

这可以隐藏 url bar 并且有很多选项： https://github.com/apache/cordova-plugin-inappbrowser#cordovainappbrowseropen

this.iab.create('https://url', '_self', 'location=no,fullscreen=no')

不打开新的浏览器窗口，添加这个

// capacitor.config.ts
server: {
  allowNavigation: ['your-domain']
}

电容浏览器

https://capacitorjs.com/docs/apis/browser

但是，13.2.4 ver 不能隐藏网址栏。

【讨论】：