Question

我试图在单个父页面上使用两个easyXDM套接字但没有成功。两个套接字都连接到相同的远程域但不同的端点。父页面有两个div false_app_div和dummy_app_div。以下显示了代码段 -

在父页面上，我有两个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控制台上出现错误，有些东西是未定义的（我找不到）。

另外，我知道这个问题与加载两个easyXDM有关，因为如果我将init_dummy_app_communication放在on_load_fn的{{1}}中（除了activate_false_app()之外）现在），然后两者都有效。

但是，我无法确定easyXDM是否已加载，因此init_false_app_communication和activate_false_app都必须加载easyXDM，以便它们可以单独工作，也可以一起工作。我尝试使用activate_dummy_app函数，但那里的文档很差，结果没有具体的内容。

有人遇到类似的问题或知道我在这里缺少什么？

Answer 1

EasyXDM允许您为每个站点提供多个实例。您可以使用noConflict。

执行此操作

例如，如果您正在构建将在您无法控制的站点上运行的JavaScript，则可以始终创建EasyXDM实例并将其设置为您想要的任何内容。

我为我们的JavaScript小部件（the usage can be viewed here）执行此操作。然后，每个脚本都可以调用ns.NSEasyXDM并引用它，而不会在全局命名空间中对easyXDM进行打击（因为它喜欢将自己放在window上）。

如果您需要与多个端点通信，则可以根据需要发送不同的consumerRpcConfig和consumerJsonRpcConfig。

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”，将每个实例分配给变量;然后你可以传递它。

Answer 2

在此页面; https://groups.google.com/forum/#!topic/easyxdm/bOoznzUrkjE

它被提及为;

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

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

一页中有多个easyXDM

2 个答案: