Phonegap事件在线/离线不起作用

Question

我正在使用PhoneGap（Cordova）3.0.0编写应用程序，但是“online”和“offline”事件无法正常工作。当我尝试使用“resume”事件时，它可以正常工作。我正在使用XCode 4.5和IOS。

这是我PhoneGap项目的主要JavaScript文件：

var app = {

    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);
        document.addEventListener('online', this.onDeviceOnline, false);
        document.addEventListener('resume', this.onDeviceResume, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },

    onDeviceOnline: function() {
        app.receivedEvent('deviceonline');
    },

    onDeviceResume: function() {
        app.receivedEvent('deviceresume');
    },

    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);
    }
};

感谢您的建议。

- user2374693

Answer 1

如果您想显示在线/离线状态，您需要首先通过命令提示符添加网络信息插件。

$ phonegap local plugin add org.apache.cordova.network-information

在添加了该插件后，您的在线/离线事件应该可以正常工作，对我来说它运行良好。

- FnD

---

对于 Cordova 的使用，请输入：cordova plugin add org.apache.cordova.network-information。 - Jim Bergman

Answer 2

这些事件必须在“onDeviceReady”内绑定，否则它们在DeviceReady事件之前将无法工作。请参考在deviceready事件触发后附加事件监听器

bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener('resume', this.onDeviceResume, false);
},

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.addEventListener('online', this.onDeviceOnline, false);
},

请注意，在应用程序启动时不会触发在线/离线事件，只有在连接状态更改时才会触发这些事件。例如，当应用程序以在线模式启动时，直到它变为离线状态，离线事件将不会被触发，同样适用于在线事件。

要检查当前连接状态，您需要使用以下代码。

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.addEventListener('online', this.onDeviceOnline, false);
    if((navigator.network.connection.type).toUpperCase() != "NONE" &&
       (navigator.network.connection.type).toUpperCase() != "UNKNOWN") {
        this.onDeviceOnline();
    }
}

- Ashis Kumar

---

我尝试过了，但仍然不起作用。只有恢复或暂停是可以的。 - user2374693

你是如何检查事件的？这些事件不会在应用程序启动时触发，它们只会在连接状态改变时触发，即当应用程序在线时、启动时以及系统离线时触发离线事件，反之亦然。如果您需要检查当前的连接状态，请参阅更新后的答案。 - Ashis Kumar

供日后参考： 自PhoneGap 3.0起，“network”已经被移除，现在使用“navigator.connection.type”。 更多信息请参阅文档： http://docs.phonegap.com/en/edge/cordova_connection_connection.md.html - NoobishPro

有人遇到我所遇到的问题吗 - http://stackoverflow.com/questions/35425746/cordova-network-information-plugin-regularly-show-offline-unknown-state?noredirect=1#comment58568671_35425746 - Dmitry Isakov

Answer 3

在 Cordova（而不是 PhoneGap）中，您需要按照以下方式添加插件：
cordova plugin add org.apache.cordova.network-information

该插件与网络信息相关。

- Nicramus

Answer 4

你应该将连接插件添加到你的项目中，然后这些事件就会被触发。

使用以下命令添加连接插件：

CMD> phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

- Hadi Mostafapour

Answer 5

在 PhoneGap 文件夹项目中：

phonegap plugin add org.apache.cordova.network-information

在 index.js 文件中：

var app = {};
app.initialize = function() {
    document.addEventListener("online", function(){alert('online : true') }, false);
    document.addEventListener("offline", function(){alert('online : false') }, false);
};

在 index.html 文件中的某个地方：

<script type="text/javascript">
app.initialize();
</script>

- lepix

---

为什么这种方式会在设备离线或在线状态下触发两次函数？ - Umair Khalid