奇怪的Phonegap设备就绪事件行为 [英] Strange phonegap device ready event behaviour
问题描述
我正在尝试让设备就绪事件在phonegap 3 helloworld默认应用上正常工作。
I am trying to get the device ready event to work on the phonegap 3 helloworld default app.
html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
javascript
javascript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
alert('welcome!');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
此代码可以正常运行，并在我打开应用程序时触发欢迎警报。但是，如果我注释掉以下两行之一：
This code works ok and will fire my welcome alert when I open the app. However if I comment out either of the lines:
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
欢迎警报将不再触发。这是怎么回事，我不知道phonegap使用哪种机制来创建这种行为？
The welcome alert will no longer fire. What is going on here I have no idea what mechanism phonegap is using to create this kind of behavior?
推荐答案
这里的问题是不是使用phonegap，而是使用 receivedEvent 函数导致错误。如果在调用 receivedEvent 之前将警报移动，您应该看到 deviceready 事件仍然可以正确触发。
The problem here isn't with phonegap, but rather the receivedEvent function causing an error. If you move the alert before the call to receivedEvent, you should see that the deviceready event is still fired properly.
实际的问题是该行
var listeningElement = parentElement.querySelector('.listening');
获取< p class = event Listening>。 < / p> 元素。由于您删除了该元素，因此 listeningElement 将为 null 。现在调用
gets the <p class="event listening">..</p> element from the DOM. Since you remove that element, the listeningElement will be null. Now the call
listeningElement.setAttribute('style', 'display:none;');
将因此而失败。
这篇关于奇怪的Phonegap设备就绪事件行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
