重定向到 Phonegap 中的新页面后，AdMob 未定义答案

【问题标题】：AdMob is undefined after redirecting to new page in Phonegap重定向到 Phonegap 中的新页面后，AdMob 未定义
【发布时间】：2016-05-19 20:53:31
【问题描述】：

我已将AdMob Plugin Pro 添加到我的Phonegap 应用程序中。我按照示例代码并将以下代码放入我的应用程序主页：

function onDeviceReady() {
    var admobid = {};
    if( /(android)/i.test(navigator.userAgent) ) {
        admobid = { // for Android
            banner: 'ca-pub-{key hidden}'
            interstitial: 'ca-pub-{key hidden}'
        };
    } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
        admobid = { // for iOS
            banner: 'ca-pub-{key hidden}'
            interstitial: 'ca-pub-{key hidden}'
        };
    }
    if(window.AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:true} );
}
document.addEventListener('deviceready', onDeviceReady, false);

上面的代码有效，并且出现了一个插页式广告，但是当我尝试在另一个页面中再次调用 AdMob 时出现问题。我尝试了几种方法，但都没有奏效。

以下是我的应用的一些背景信息：

当用户单击链接时，我的应用程序将重新加载页面。比如用户在首页点击“设置”按钮，整个页面重新加载到“setting.html”
操作 DOM 和内容的脚本总是放在<body> 的最后一行

所以这是我尝试过的：

复制上面相同的onDeviceReady()和addEventListner()并放入另一个页面。
- 我发现第二页中没有再次触发 deviceready 事件。因此当然不会再次显示插页式广告。
只需将AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:true}复制到新页面并在页面加载后执行
- 我发现 AdMob 变成了undefined

所以我想知道我是错过了什么还是做错了什么？

谢谢！

【问题讨论】：

标签： javascript cordova admob phonegap-plugins cordova-admob

【解决方案1】：

我是this cordova-admob plugin的作者。

作为@Simon stated before，您最好的机会是迁移到 SPA。也就是说，如果这不可能，也许您可以尝试一个丑陋的解决方法，但这在很大程度上取决于您如何实现应用程序：

尝试拦截index.html 中的每个链接并尝试通过ajax 加载它。通过 ajax 加载后，您可以加载 index.html 正文中的内容。确保评估新内容中的每个脚本。在这里你可以找到我将如何实现的示例：http://plnkr.co/edit/ew21klKYRcfvjX8wrAY1

它是用纯 javascript 实现的，但如果你使用 jQuery，那么它可以让你的生活更轻松$(document.body).load(...)

【讨论】：

【解决方案2】：

不要使用多页，正如 Cordova 文档所述，单页应用程序是您的朋友。加载新页面时，您将失去所有插件和其他 Cordova 功能，除非您在所有页面中都包含 cordova.js。

如果您可以重构为 SPA，您的生活会在很多方面变得更轻松。

引用Cordova docs：

首先 - 您的 Cordova 应用程序应采用 SPA（单页应用程序）设计。松散地定义，SPA 是从网页的一个请求运行的客户端应用程序。用户加载一组初始资源（HTML、CSS 和 JavaScript）并通过 AJAX 完成进一步的更新（显示新视图、加载数据）。 SPA 通常用于更复杂的客户端应用程序。 GMail 就是一个很好的例子。加载 GMail 后，邮件视图、编辑和组织都通过更新 DOM 来完成，而不是实际离开当前页面来加载一个全新的页面。

使用 SPA 可以帮助您以更有效的方式组织应用程序，但它也对 Cordova 应用程序具有特定的好处。 Cordova 应用程序必须等待 deviceready 事件触发，然后才能使用任何插件。如果您不使用 SPA，并且您的用户单击以从一个页面转到另一个页面，则您必须等待 deviceready 再次触发，然后才能使用插件。随着您的应用程序变得越来越大，这很容易忘记。

即使您选择不使用 Cordova，在不使用单页架构的情况下创建移动应用程序也会对性能产生严重影响。这是因为在页面之间导航需要重新加载脚本、资产等。即使这些资产被缓存，仍然存在性能问题。

【讨论】：

现阶段恐怕无法改成SPA，因为这是另一个程序员创建的项目，截止日期不允许我现在重构程序。所以我必须先用丑陋的方式来做。我尝试在每个页面中包含cordova.js，但 AdMob 仍然未定义。我错过了什么吗？谢谢！
您可能还需要监听 deviceready，因为每个页面加载基本上都将重新开始。在转到 SPA 之前，您的体验将非常糟糕。
我尝试收听deviceready，但没有成功。似乎该事件甚至没有在第二页触发。
我会再说一遍，不使用 SPA 你不会走上成功的轨道。