使用 jQuery Mobile 和 $(document).ready 与 PhoneGap Build 和 document.addEventListener("deviceready&

Posted 2023-03-07

【中文标题】使用 jQuery Mobile 和 $(document).ready 与 PhoneGap Build 和 document.addEventListener("deviceready")

【英文标题】：Using jQuery Mobile and $(document).ready with PhoneGap Build and document.addEventListener("deviceready")

【发布时间】：2014-10-29 21:09:44

【问题描述】：

我已经完成了与此相关的两个问题的解决方案 - JQuery document.ready vs Phonegap deviceready 和 Correct way of using JQuery-Mobile/Phonegap together? 并且仍然没有更接近解决方案。

我们的问题在于 PhoneGap Build 插件。我们使用 Device 插件将特定的 UI 组件位置和大小定位到 iPhone 4 和 5。这样做我们需要调用事件侦听器，使用 Device 插件获取设备模型，设置变量（iosversion = true）然后在我们构建 UI 时使用该变量。

我们无法让它工作。

我们使用的是 jQuery Mobile，所以一切都在一个

 $(document).ready(function(

这个有

document.addEventListener("deviceready", false); 

在其中，以及我们的其余脚本和 UI 初始化脚本。 jQM 是模板，但我们正在基于 JSON 数据构建内容和 UI 组件。到目前为止，一切都很好。

问题是 UI 初始化脚本似乎在事件侦听器完成它所做的任何事情之前就开始了，因此 iOS 版本在 UI 脚本运行时永远不会是真的。

是的，我们可以在 onDeviceReady 中调用它：

 document.addEventListener("deviceready", onDeviceReady, false);

但是我们无法在浏览器中进行测试。

我确信我缺少一些简单的解决方案，但我们已经解决了一天，这是最后的障碍，让每个人都感到非常沮丧。

【问题讨论】：

mobileinit 在.ready() 之前触发（我不知道科尔多瓦）。您可以在该阶段禁用自动初始化，直到收集到所有数据，然后触发初始化函数。

你是说我应该将事件监听器放入 mobileinit 以便首先触发 Cordova 插件？

我对科尔多瓦没有经验。如果您打算尝试一下，请将mobileinit 代码放在 jQuery 之后和 jQM 库之前。至少要检查之前触发了哪个事件，是mobileinit 还是deviceready。在那个阶段，您可以延迟初始化页面，直到获得所有必需的数据。

【参考方案1】：

我得到了答案。

window.cordova 在 Phonegap Build 中公开。所以我检查这个是否存在，在 jQuery $(document).ready 中是这样的：

if ( !!window.cordova ) 
 // phonegap script has loaded so have our 
 // initializeApplication called when the device is ready
 document.addEventListener("deviceready", 
            initializeApplication, false);

else 
 // running in browser without phonegap so 
 // manually call initializeApplication
 initializeApplication();

function initializeApplication() 
 // do everything here to initialize the
 // application and its UI