预加载离子页面答案

【问题标题】：Preloading an Ionic Page预加载离子页面
【发布时间】：2019-09-20 16:03:59
【问题描述】：

我创建了一个游戏并使用 ionic 3 将其部署到移动平台。我有两个页面，page1 是列表页面，page2 是游戏在 iframe 中运行的页面。我想要实现的是，每当用户从列表中选择游戏时，只要加载 iframe，我就想让用户在 page1 上显示加载文本，然后当 iframe 完全加载时，我移至 page2

有没有办法做到这一点？我试过使用 this.navCtrl.insert(RoomPage, 0, {}); 在索引 0 处插入 RoomPage，然后稍后在列表页面中使用它，例如 let page: any = this.navCtrl.getByIndex(0); page.openGameRoom(options);，但它没有按预期工作。我需要预先加载 RoomPage 以便我可以传递事件或以某种方式调用其函数，是否有其他方式来实现我提到的功能。

【问题讨论】：

标签： ionic3

【解决方案1】：

当 iFrame 完成加载时，您可以在页面 2 中显示加载屏幕并关闭加载器/加载屏幕，而不是在 Page1 中显示加载屏幕：

<iframe (load)="myLoadEvent()" id="myiframe"></iframe>

【讨论】：

是的，到目前为止我就是这样处理它的，但要求是让用户保持在显示加载 gif 的列表页面上，当 RoomPage 中的 iframe 完全加载时，我删除加载 gif 并移至 RoomPage，谢谢
但是如何在不导航的情况下加载 RoomPage。您的要求不满足 Angular/Ionic 页面生命周期。一种解决方案是将列表页面和房间页面的内容放在 ion-slides 中，并在 iFrame 加载后隐藏列表。
我同意将列表页面和 RoomPage 放在 1 个页面中并具有单独的 div 并使用 *ngIf 来区分它们的解决方案，但我认为可能有一种方法可以加载页面在后台（或预加载），因为在 1 个页面上管理列表和游戏会很困难。
我认为没有任何方法可以在单独的页面上预加载 iframe。由于 ionic 适用于 Web View，WebView 只有在获取其代码时才会绘制 iFrame。在类似的上下文中，您尝试加载 HTML 页面而不向浏览器提供实际的 HTML 内容。