一页中有多个easyXDM答案

【问题标题】：Multiple easyXDM in one page一页中有多个easyXDM
【发布时间】：2013-08-19 22:05:26
【问题描述】：

我试图在单个父页面上使用两个 easyXDM 套接字但没有成功。两个套接字都连接到同一个远程域，但端点不同。父页面有false_app_div和dummy_app_div两个div。下面是代码sn-ps-

在父页面我有两个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 放在activate_false_app() 的on_load_fn 中（除了已经存在的init_false_app_communication），那么两者都可以。

但是，我不能确定 easyXDM 是否已经加载，所以 activate_false_app 和 activate_dummy_app 都必须加载 easyXDM，这样它们才能独立工作以及一起工作。我尝试使用noConflict 函数，但那里的文档很差，最终没有具体的内容。

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

【问题讨论】：

标签： javascript easyxdm

【解决方案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”，将每个实例分配给一个变量；然后你就可以传递它了。

【讨论】：

【解决方案2】：

在这个页面中； https://groups.google.com/forum/#!topic/easyxdm/bOoznzUrkjE

它被称为;

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

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

【讨论】：