Tek bir sayfada birden fazla easyXDM

Question

Tek bir ana sayfada iki easyXDM soketini başarılı bir şekilde kullanmaya çalışıyorum. Her iki yuva da aynı uzak alana, ancak farklı son noktalara bağlanır. ebeveyn sayfada

İki JS fonksiyonlarını activate_false_app() ve activate_dummy_app() var - üst sayfa iki false_app_div ve dummy_app_div .bir aşağıdaki div'leri gösterir kod parçacıklarını vardır. her iki izolasyon tamamen iyi çalışır olduğunu -

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

üst sayfasında, ben de activate_dummy_app() veya activate_false_app(), çalışıyor ararsanız

. Ama ikisini de ararsam, o zaman sadece bir tanesi çalışır ve JS konsolunda bir hata olur, bir şey tanımlanmamıştır (ki bulamadım).

Ayrıca, her iki eserler sorun ben (zaten mevcut init_false_app_communication ek olarak) activate_false_app() arasında on_load_fn yılında init_dummy_app_communication koymak iki easyXDMs çünkü eğer yükleme ile ilgili bir şey olduğunu biliyoruz.

Ancak, ben easyXDM zaten yüklenmiş olduğundan emin olamaz, bu yüzden gibi birlikte de izolasyon çalışması böylece activate_false_app ve activate_dummy_app sahiptir hem easyXDM yüklemek için. noConflict işleviyle çalışmayı denedim, ancak belgelerin fakir ve orada somut bir şey yok.

Birisi benzer bir sorunla karşılaştı veya burada neyi kaçırdığımı biliyor mu? Bu sayfadaki

Answer 1

;

;

(function(){ 
    var easyXDM; 
    // paste easyXDM's minified code here 

    var rpc = easyXDM.Rpc(..... 
    ... 
})(); 

Answer 2

EasyXDM, site başına birden çok örneğine sahip olmanıza izin verir. Bunu noConflict kullanarak yapabilirsiniz. Örneğin, bir siteye gideceğiniz JavaScript'i oluşturuyorsanız, her zaman bir EasyXDM örneği oluşturabilir ve istediğiniz her şeye ayarlayabilirsiniz. Örneğin;

Bunu, JavaScript widget'larımız için yapıyorum (the usage can be viewed here). Her bir betik daha sonra ns.NSEasyXDM'u arayabilir ve genel ad alanında easyXDM'yi pummelingmeden bir referansa sahip olabilir (kendisini window'a koymayı sevdiği için).

Birden çok uç nokta ile konuşmanız gerekirse, gerektiği gibi farklı bir consumerRpcConfig ve consumerJsonRpcConfig gönderebilirsiniz.

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

bir değişkene her örneği atayabilir "noConflict" kullanımı, yukarıda gösterildiği gibi, EasyXDM birden fazla kopyasını tanımlamak; ve sonra bunu geçebilirsiniz.