将对话框函数包装在 deviceReady 事件侦听器中后未定义

Question

我编写了一个简单的应用程序来测试本机对话框。为简单起见，我将只包含用于触发警报对话框的代码。这是代码：

index.html

<div id="alert" class="item">
  <h1>Alert</h1>
  <p>Title</p>
  <input type="text" />
  <p>Message</p>
  <textarea></textarea>
  <p>Button label</p>
  <input type="text" />
  <button onclick="alertDiag()" class="submit">GO</button>
</div>

main.js

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

function onDeviceReady() {
  function alertDiag() {
    var message = document.getElementById("alert").children[4].value;
    var title = document.getElementById("alert").children[2].value;
    var buttonName = document.getElementById("alert").children[6].value;
    function alertCallback() {
      alert("The alert was dismissed");
    }
    navigator.notification.alert(message, alertCallback, title, buttonName);
  }
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.nativedialogues" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>Testing Native Dialogues</name>
  <description>
    An application for testing native dialogues
  </description>
  <author email="example@gmail.com" href="http://www.example.com">
    PhoneGap Team
  </author>
  <content src="index.html"/>
  <preference name="DisallowOverscroll" value="false"/>
  <access origin="*"/>
  <plugin name="cordova-plugin-dialogs" spec="~1.3.4"/>
</widget>

但是，由于 alertDiag() 包含在 deviceReady 事件侦听器中，因此在通过单击按钮调用时未定义。在控制台中，我收到以下错误：

Cannot get property 'alert' of undefined

如何才能让该功能只在设备就绪后才可用，同时点击按钮时又能执行？

我正在使用 phonegap 云构建服务来打包应用程序，而不是本地 phonegap cli。

Answer 1

首先，您可能已经了解，deviceready 是 Cordova 完成为您的应用程序加载所有插件时触发的事件。这只是一个指示，让您知道如果有在页面加载时访问任何插件的逻辑，那么理想情况下它应该进入设备就绪回调。

在您的例子中，alertDiag() 是在用户交互时调用的，而不是在页面加载时调用的。这意味着您需要在 deviceready 回调之外定义它。

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

function onDeviceReady() {
  // any logic on page load
}

function alertDiag() {
  var message = document.getElementById("alert").children[4].value;
  var title = document.getElementById("alert").children[2].value;
  var buttonName = document.getElementById("alert").children[6].value;

  function alertCallback() {
    alert("The alert was dismissed");
  }
  navigator.notification.alert(message, alertCallback, title, buttonName);
}

将对话框函数包装在 deviceReady 事件侦听器中后未定义

Dialog functions undefined after wrapping them in a deviceReady event listener

javascript

android

cordova

phonegap