0

一旦我在 jsfiddle 上摆弄，我就失去了我的互联网连接。然后，该网站提醒我我没有互联网连接。在这里，通过单击禁用连接尝试一下：

示例代码

他们以某种方式实现了一个代码，该代码在没有任何 ajax 请求的情况下检查互联网连接，这与此不同。

经过一番挖掘，我发现了这个片段

Heyoffline.prototype.setup = function() {
  this.events = {
    element: ['keyup', 'change'],
    network: ['online', 'offline'] // THIS PART 
  };
  this.elements = {
    fields: document.querySelectorAll(this.options.elements.join(',')),
    overlay: document.createElement('div'),
    modal: document.createElement('div'),
    heading: document.createElement('h2'),
    content: document.createElement('p'),
    button: document.createElement('a')
  };

但我不明白它是如何工作的，因为它是自动生成的。关联

任何人都可以阐明，所以我可以在我的系统中实现这样的东西。

4

1 回答 1

0

魔法在这里完成

Heyoffline.prototype.networkEvents = function(event) {
    return addEvent(window, event, this[event]);
};

哪个被调用attachEvents

    Heyoffline.prototype.attachEvents = function() {
        var event, field, _i, _j, _len, _len1, _ref, _ref1,
        _this = this;
        _ref = this.elements.fields;
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            field = _ref[_i];
            this.elementEvents(field);
        }
        _ref1 = this.events.network;
        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
            event = _ref1[_j];
            this.networkEvents(event); //Called here
        }
        return addEvent(window, 'resize', function() {
            return _this.resizeOverlay();
        });
    };

事件，无论是在线还是离线都传递给这个addEvent函数

addEvent定义为：

addEvent = function(element, event, fn, useCapture) {
    if (useCapture == null) {
        useCapture = false;
    }
    return element.addEventListener(event, fn, useCapture);
};

所以真的按照我所看到的来使用在线/离线功能，你需要做的就是调用：

//online
window.addEventListener('online', function(){alert('You are online')}, false);
//offline
window.addEventListener('offline', function(){alert('You are online')}, false);

和鲍勃你叔叔

也在这里测试过：http: //jsfiddle.net/W4EKh/

在jsfiddle之后立即出现警报，所以我很确定它是如何工作的......

另外，这里有一些可以帮助的东西:)...

function networkListener(a, b){
    var offlineF, onlineF;
    if(a instanceof Function && b instanceof Function){
        onlineF = a;
        offlineF = b;
    }else if(a instanceof Function){
        if(typeof b === "string"){
            if(b === "online"){
                onlineF = a;
            }else if(b === "offline"){
                offlineF = a;
            }
        }else{
            onlineF = a;
        }
    }
    if(typeof onlineF !== "undefined"){
        window.addEventListener('online', onlineF, false);
    }
    if(typeof offlineF !== "undefined"){
        window.addEventListener('offline', offlineF, false);
    }
}

在这里你可以试试...

http://jsfiddle.net/47N6L/2/

于 2013-05-03T12:37:04.650 回答