时间戳

首页 > 解决方案 > 位置：在 Ionic 3 中的 iframe 中加载 Angular 站点时，修复在 iOS 中不起作用

ios - 位置：在 Ionic 3 中的 iframe 中加载 Angular 站点时，修复在 iOS 中不起作用

问题描述

简要说明我们正在努力实现的目标

我们正在开发一个Angular应用程序。我们使用相同的代码库为 Web 和 Mobile 开发了它。移动版包含很多功能，例如推送通知、短信订阅等。我们希望将移动版发布到 App Store 和 Play 商店。我们正在使用简单的 Ionic 3 应用程序将其构建到 Android 和 iOS。

Ionic 3 应用程序只包含一个页面，我们在其中加载Angular网站iframe。

Ionic 页面的 HTML

<ion-content>
  <iframe class= 'webPage' [src]="iframeSrc" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
</ion-content>

Ionic 页面的 TS

export class HomePage {
  iframeSrc: any;

  sanitizer: DomSanitizer;
  url: string = 'https://angular-load-ionic-iframe.stackblitz.io';

  constructor( sanitizer: DomSanitizer ) {
    this.sanitizer = sanitizer;
    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);

  }
}

在此处找到Ionic 3 应用程序的 Github 存储库。

我创建了类似于 My Angular 应用程序的StackBlitz Angular 项目。在这里找到它。

我的问题

在我的应用中，app-header需要app-footer固定到 ViewPort 等内容应该可以滚动。我成功地为 Android 实现了这一点，但在 iOS 中，app-header并没有固定到 ViewPort，当我在 Ionic 应用程序中app-footer 加载我的 Angular 应用程序时，这些内容与其他内容一起滚动。iframe

header.component.html

<header>
  <div class="main">
        <h3>Countries</h3>
    </div>
</header>

header.component.css

.main {
    background-color: #46454A;
    color: rgba(255,255,255,.6);
    padding:5px 50px;
}

header{
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
}

页脚.component.html

<footer class="footer">
    <h3>This is footer</h3>
</footer>

页脚.component.css

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
  background-color:#47454b;
}
h3 {
  color: white;
  padding:0px 50px;
}

我不知道是CSSiOS 的问题还是我在里面加载 Angular 网站时发生的iframe。挣扎了一天，还是没有成功。如果有人可以帮助我解决此问题，我们将不胜感激，如果有人需要有关此问题的更多详细信息，请随时发表评论。

标签： ioscssangularionic-frameworkiframe

解决方案

您是否尝试过md通过应用配置将整个应用模式/平台样式设置为？如果您能够在 Android 上解决此问题，那么也许在 iOS 版本中全局采用 Android 样式也可以解决该平台的问题？

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  imports:      [ 
    BrowserModule, FormsModule,
    IonicModule.forRoot({
      mode: 'md'
    }),  
  ],
  declarations: [ AppComponent, HeaderComponent, FooterComponent, HomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

推荐阅读