位置：在Ionic 3中加载iframe内的角度站点时，fixed在iOS中不工作

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

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

Ionic 3应用程序只包含一个页面，其中我们正在

iframe

中加载我们的Angular网站

爱奥尼亚网页的HTML

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

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

  }
}

找到爱奥尼亚3应用程序。

我创建了与我的Angular应用程序类似的Angular project。找到它。

我的问题

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

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

  }
}

在我的应用程序中，

应用程序页眉

和

应用程序页脚

需要固定为 视口和其他内容应该能够滚动。我成功地 Android实现了这一点，但在iOS中，

app header

和

app footer

未固定到视口，并且这些内容与其他内容一起滚动 当我在Ionic应用程序的

iframe

中加载角度应用程序时。

header.component.html

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

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

footer.component.html

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

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

---

我想不出是iOS出现了

CSS

问题，还是在

iframe

中加载angular网站时出现的问题。挣扎了一天，还是没有成功。如果有人能帮我解决这个问题，我们将不胜感激，如果有人需要更多关于这个问题的详细信息，请随时发表评论。

您是否尝试过通过应用程序配置将整个应用程序模式/平台样式设置为

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

---

我不熟悉爱奥尼亚和你的角度设置，但是：在safari浏览器中有一个类似的位置修正错误

问题是：无法定位作为主体标记直接子级的固定图元

解决方案是：将内容包装到另一个div.中，并将每个div.都放在其中

---

也许您可以尝试将页眉和页脚元素放在一个额外的div中，这样页脚就不是body标记的直接子元素。

将此css放在您的style.css中

body {
    margin: 0px;
}
h3 {
  color: white;
  padding:0px 50px;
}
my-app{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

app-header,app-home,app-footer{
  position: absolute;
  left: 0;
  width: 100%;
}
app-header,app-footer{
  text-align: center;
  color: white;
  height: 50px;
   background-color:#47454b;
}
app-header{
  top:0;
}
app-footer{
  bottom:0;
}
app-home {
  top: 50px;
  bottom: 50px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

删除

header.component.css和
footer.component.css的所有css

以下是stackblitz链接
未尝试过，但值得一试：

style.css

body {
    margin: 0px;
}
h3 {
  color: white;
  padding:0px 50px;
}
my-app{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

app-header,app-home,app-footer{
  position: absolute;
  left: 0;
  width: 100%;
}
app-header,app-footer{
  text-align: center;
  color: white;
  height: 50px;
   background-color:#47454b;
}
app-header{
  top:0;
}
app-footer{
  bottom:0;
}
app-home {
  top: 50px;
  bottom: 50px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
margin: 0px;
position: sticky;
z-index: -1;
width: 100%;

}

home.component.html

<div style="display: block;">
    <div class="container" *ngFor="let country of countries">
        <div class="code"><strong>Code:</strong> {{country.countryCode}}</div>
        <div class="name"><strong>Name:</strong> {{country.countryName}}</div>
    </div>
</div>

我在IE中遇到了类似的问题，页脚和页眉都有粘性，这对我来说很有用。您说您正在使用iFrame，但在fork中找不到一些，只有div包装的内容。。。如果包括iframe，则可以尝试为iframe应用相对定位，如

position: relative;

以避免与页眉和页脚冲突。希望这有帮助。
谢谢你的回答。我试过你的解决办法。但它并没有解决我的问题。我无法想象当我在
iframe
中加载Angular站点时会出现此问题。但是，当我在safari中调试iOS应用程序时，它显示应用了所有必需的样式。无论如何，谢谢你的努力。没问题，值得一试，这是一个相当不寻常的设置，所以我认为你在这个问题上会很难获得帮助。是的，这实际上是不寻常的。我已经为此花了一天时间。但还没有找到解决办法。不管怎样，谢谢你的回答。谢谢你的回答。但事实并非如此。问题在于
iframe
。如果没有
iframe
，所有样式都将应用于iPhone，我需要感谢您的回答。我会试试看。@Imon非常感谢。你的回答很有魅力。你救了我的命，这甚至不是答案。这是一个“在这里，让我为你做你的工作，没有解释。”