2013-08-17 9 views
5

Sto provando ad utilizzare due socket easyXDM su una singola pagina madre senza successo. Entrambi i socket si connettono allo stesso dominio remoto ma a endpoint diversi. La pagina padre ha due div false_app_div e dummy_app_div .La seguente mostra la Frammenti di codice -Multiple easyXDM in una pagina

Nella pagina genitore ho due funzioni JS activate_false_app() e activate_dummy_app().

window.loadScript = function(src, onload, onerror) { 
    var head = document.getElementByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = src; 
    if (script.readyState) { 
     script.onreadystate = function() { 
     var state = this.state; 
     if (state === 'loaded' || state === 'complete') { 
      script.onreadystate = null; 
      onload(); 
     } 
     }; 
    } 
}; 
window.activate_false_app = function() { 
    var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js'; 
    on_load_fn = function() { 
     window.init_false_app_communication(); 
    }; 
    on_error_fn = function() { 
     return false; 
    }; 
    window.loadScript(exdm_url, on_load_fn, on_error_fn); 
}; 
window.init_false_app_communication = function() { 
    var false_app_socket = new easyXDM.Socket({ 
     remote : 'http://localhost:8000/false_app', 
     swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf', 
     container : 'false_ap_div', 
     onMessage : function(message, origin) { 
     alert('false_app onMessage'); 
     alert(message); 
     } 
    }); 
}; 
window.activate_dummy_app = function() { 
    var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js'; 
    on_load_fn = function() { 
    window.init_dummy_app_communication(); 
    }; 
    on_error_fn = function() { 
    return false; 
    }; 
    window.loadScript(exdm_url, on_load_fn, on_error_fn); 
}; 
window.init_dummy_app_communication = function() { 
    var dummy_app_socket = new easyXDM.Socket({ 
     remote : 'http://localhost:8000/dummy_app', 
     swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf', 
     container : 'dummy_app_div', 
     onMessage : function(message, origin) { 
      alert('dummy_app onMessage'); 
      alert(message); 
     }; 
    }); 
}; 

Se nella pagina padre, che io chiamo sia activate_dummy_app() o activate_false_app(), funziona - cioè entrambi funzionano completamente bene in isolamento. Ma se chiamo entrambi, solo uno di loro funziona e ricevo un errore sulla console JS, che qualcosa non è definito (cosa che non sono riuscito a trovare).

Inoltre, so che il problema ha a che fare con carico due easyXDMs perché se metto init_dummy_app_communication nel on_load_fn di activate_false_app() (in aggiunta a init_false_app_communication già presente), poi entrambe le opere.

Tuttavia, non posso essere sicuro che easyXDM sia già caricato, quindi sia activate_false_app sia activate_dummy_app deve caricare easyXDM, in modo che funzionino sia in modo isolato che insieme. Ho provato a lavorare con la funzione noConflict, ma la documentazione è scadente e non ho trovato nulla di concreto.

Qualcuno ha affrontato un problema simile o sa cosa mi manca qui?

risposta

0

EasyXDM consente di avere più istanze di esso per sito. È possibile farlo utilizzando noConflict.

Ad esempio, se stai costruendo JavaScript che andrà su un sito che non controlli, puoi sempre creare un'istanza di EasyXDM e impostarlo in base a ciò che desideri.

Faccio questo per i nostri widget JavaScript (the usage can be viewed here). Ogni script può quindi chiamare ns.NSEasyXDM e avere un riferimento ad esso senza prendere a pugni easyXDM nello spazio dei nomi globale (dal momento che ama mettersi sullo window).

Se è necessario parlare con più endpoint, è possibile inviare un diverso consumerRpcConfig e consumerJsonRpcConfig secondo necessità.

this.ns = this.ns || {}; 
(function(ns, window, document) { 
    var base = this, 
     consumerRpcConfig = { 
      remote: document.location.protocol+ "//my.path.org/Scripts/easyXDM/cors/" 
     }, 
     consumerJsonRpcConfig = { 
      remote: { 
       request: {} 
      } 
     }, 
     init = function(el, callback) { 
      var easyXDMElement, 
       scripts = document.getElementsByTagName('script'), 
       scriptIdx; 
      for (scriptIdx = 0; scriptIdx < scripts.length; scriptIdx = scriptIdx + 1) { 
       if (scripts[scriptIdx].src === document.location.protocol + '//my.path.org/Scripts/EasyXDM/easyXDM.js') { 
        base.isEasyXDMPresent = true; 
       } 
      } 
      if (!base.isEasyXDMPresent || ns.NSEasyXDM === undefined) { 
       easyXDMElement = document.createElement('script'); 
       easyXDMElement.type = 'text/javascript'; 
       easyXDMElement.src = document.location.protocol + '//my.path.org/Scripts/EasyXDM/easyXDM.js'; 
       el.parentNode.insertBefore(easyXDMElement, el); 
      } 
      easyXDMElement.onload = function() { 
       ns.NSEasyXDM = { easyXDM: window.easyXDM.noConflict("NSEasyXDM") }; 
       callback(); 
      }; 

     } 
    return ns; 
}(this.ns, window, document)); 

Per definire più copie di EasyXDM come mostrato sopra, usi "noConflict", assegnare ciascuna istanza alla variabile; e poi puoi passarlo.