javascript - 一个页面中的多个 easyXDM

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 放在 activate_false_app() 的 on_load_fn 中>(除了 init_false_app_communication 已经存在)，然后两者都有效。

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

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

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