2013-08-17 29 views
5

我想在单个父页面上使用两个easyXDM套接字,但没有成功。这两个套接字连接到相同的远程域但不同的端点。父页面有两个div false_app_divdummy_app_div。下面显示的代码片段 -多个easyXDM在一个页面

在父页面我有两个JS功能activate_false_app()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); 
     }; 
    }); 
}; 

如果父页面,我打电话或者activate_dummy_app()activate_false_app(),它的工作原理 - 这是孤立的工作都完全正常。但是如果我同时调用这两个函数,那么只有其中一个能够工作,并且在JS控制台上出现错误,那些东西是未定义的(我找不到)。

另外,我知道这个问题有事情做与装入两张easyXDMs因为如果我把init_dummy_app_communicationactivate_false_app()on_load_fn(除init_false_app_communication已经存在),那么这两个作品。

但是,我无法确定easyXDM是否已经加载,因此activate_false_appactivate_dummy_app都必须加载easyXDM,以便它们可以独立工作,也可以一起工作。我尝试使用noConflict函数,但是那里的文档很糟糕,最终没有具体的结果。

有人遇到类似的问题或知道我在这里失踪?

回答

0

EasyXDM允许您为每个站点拥有多个实例。您可以使用noConflict来做到这一点。例如,如果您要构建将在您无法控制的网站上运行的JavaScript,则始终可以创建EasyXDM实例并将其设置为任何您想要的。

我这样做是为了我们的JavaScript小部件(the usage can be viewed here)。然后,每个脚本都可以调用ns.NSEasyXDM,并在不触及全局名称空间中的easyXDM的情况下引用它(因为它喜欢将自己放在window上)。

如果您需要与多个终端通话,您可以根据需要发送不同的consumerRpcConfigconsumerJsonRpcConfig

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

要定义EasyXDM的多个拷贝,如上所示,使用“noConflict”,每个实例分配给一个变量;然后你可以通过它。