Ionic 的导航栏阻碍 iframe

Posted

技术标签:

【中文标题】Ionic 的导航栏阻碍 iframe【英文标题】:Ionic's navigation bar obstructs iframe 【发布时间】:2015-05-06 15:47:22 【问题描述】:

我写这个问题是因为其他非常相似的答案没有帮助:

Show a website inside an ionic tab How to make a container fill whole screen below the navigation bar in Ionic?

所以,问题是,我在 Ionic 应用程序中有一个页面,该页面只有导航栏和 iframe,但是当您将其导出到设备时,导航栏会在 iframe 前面占用空间,这不是使用 ionic serve --lab 运行应用时不会发生这种情况。

我该如何解决这个问题?

代码是这样的:

<ion-view view-title="Detalles de mensaje" class="detallesWV-page">
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-navicon-round" ng-click="openPopover($event)">
    </button>
  </ion-nav-buttons>

  <ion-content scroll="false">
    <div id="contenido" style="top:10px;">
      <iframe   frameborder="0" src="http://cnn.com"></iframe>
    </div>
  </ion-content>
</ion-view>

【问题讨论】:

【参考方案1】:

尝试在 ion-content 上添加 class="has-header"

【讨论】:

从 div 中移除样式“top:10px”。这是一个笨拙的plnkr.co/edit/Y8raxGlCfI91ox5jduHf?p=preview 我已经做了,还是不行。然后我删除了div,也没有用。

以上是关于Ionic 的导航栏阻碍 iframe的主要内容,如果未能解决你的问题,请参考以下文章

在 Ionic 应用程序中隐藏导航栏

Ionic2 渐变隐藏导航栏|标题栏

如何更改 Ionic 2 中导航栏的背景颜色?

如何在Ionic 2应用程序中提取和重用导航栏模板和逻辑?

更改颜色导航栏标题 Ionic 2

Ionic 2禁用没有导航栏的向后滑动