ios - Ionic iframe 加载在 iOS 上无法完全运行

标签 ios iframe ionic-framework

我正在使用 ionic 开发移动应用程序。该应用程序有多个加载外部页面的 iframe。 iframe 加载在 Android(设备和模拟器)和浏览器中运行良好。但在 iOS 上,外部页面未完全加载到 iframe 中。页面在页面底部被切断,详细信息请参见屏幕截图: iOS Device Screen

我的问题是为什么会发生这种情况以及为什么它在 Android 上运行。 以下代码片段显示了我如何添加 iframe:

page.html

<ion-view  class="center" view-title="">          
<ion-content>
<!-- div used to enable scrolling in the iframe on iOS -->
<div class="scroll-wrapper">
   <iframe id="seats" width ="100%" height ="100%" ng-src="  {{seatPath}}" ng-onload="hideProgess()" ng-show="!loadError" ></iframe>
</div>
</ion-content>

ma​​in.css

  .center .scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center;
}
.center .scroll {
  display: table-cell !important;
  vertical-align: middle !important;
}

.scroll-wrapper {
  position: fixed; 
  right: 0; 
  bottom: 50px; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-wrapper iframe {
  height: 100% !important;
  width:  100% !important;
  min-height: 100% !important;
  bottom: 50px !important;; 
}

编辑:
我已经测试了其他网页,当我将它们加载到 iframe 中时,即使在 ios 上,它们也能正常工作,我想要加载的网页可能存在错误?

最佳答案

尝试将其添加到标记内的 config.xml 文件中:

<allow-navigation href="*" />

关于ios - Ionic iframe 加载在 iOS 上无法完全运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37004161/

相关文章:

ios - UITextView href 链接不起作用

ios - 将 FetchRequest 项移至其自己的 View 结构后,SwiftUI 停止显示列表更新

iframe 中的 jQuery 在 IE 中不起作用

css - 无法在 ion-card ionic 4 上设置完整背景图像

javascript - Ionic 如何制作链接到其他州的列表

iphone - iOS:静音模式打开时无法播放声音

objective-c - 项目针对模拟器进行编译,但针对设备进行编译时出现 40 个错误

html - 框架。从不同的移动设备获取相同的 iframe 点

javascript - 为什么div的iframe和/或innerHTML在生成时不总是包含iframe的源html?

css - 位置 : sticky doesn't work for element inside <ion-item>