一页中有多个easyXDM [英] Multiple easyXDM in one page
问题描述
我试图在单个父页面上使用两个easyXDM套接字但没有成功。两个套接字都连接到相同的远程域但不同的端点。父页面有两个div false_app_div 和 dummy_app_div 。以下显示代码段 -
I am trying to use two easyXDM sockets on a single parent page without success. Both the sockets connect to the same remote domain but different endpoints. The parent page has two divs false_app_div and dummy_app_div.The following shows the code snippets -
在父页面上我有两个JS函数 activate_false_app（）和 activate_dummy_app（） 。
On the parent page I have two JS functions activate_false_app() and 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控制台上出现错误，有些东西是未定义的（我找不到）。
If in the parent page, I call either activate_dummy_app() or activate_false_app(), it works - that is both work completely fine in isolation. But if I call both, then only one of them works and I get an error on the JS console, that something is undefined (which I could not find).
，我知道这个问题与加载两个easyXDM有关，因为如果我把 init_dummy_app_communication 放在 on_load_fn 的 activate_false_app（）（除了 init_false_app_communication 已经存在），然后两者都有效。
Also, I know that the problem has something to do with loading two easyXDMs because if I put init_dummy_app_communication in the on_load_fn of activate_false_app() (in addition to init_false_app_communication already present), then both works.
但是，我无法确定easyXDM是否已加载，因此 activate_false_app 和 activate_dummy_app 已包含加载easyXDM，使它们可以单独工作，也可以一起工作。我尝试使用 noConflict 函数，但那里的文档很差，最后没有具体的内容。
However, I cannot be sure that easyXDM is already loaded, so both activate_false_app and activate_dummy_app has to load easyXDM, so that they work in isolation as well as together. I tried working with noConflict function, but the documentation there is poor and ended up with nothing concrete there.
有人遇到类似的问题或知道我在这里缺少什么吗？
Has someone faced a similar problem or knows what I am missing here?
推荐答案
EasyXDM允许您为每个站点提供多个实例。您可以使用 noConflict 来执行此操作。
EasyXDM allows you to have multiple instances of it per site. You can do this using noConflict.
例如，如果您要构建将在网站上运行的JavaScript如果您无法控制，您可以随时创建EasyXDM实例并将其设置为您想要的任何内容。
For example, if you're building JavaScript that will go on a site you do not control, you can always create an instance of EasyXDM and set it to whatever you want.
我为我们的JavaScript小部件执行此操作（可以在这里查看用法）。然后，每个脚本都可以调用 ns.NSEasyXDM 并在不对全局命名空间中的easyXDM进行打击的情况下对其进行引用（因为它喜欢将自己放在上窗口）。
I do this for our JavaScript widgets (the usage can be viewed here). Each script can then call ns.NSEasyXDM and have a reference to it without pummeling the easyXDM in the global namespace (since it likes to put itself on the window).
如果您需要与多个端点通信，您可以发送不同的 consumerRpcConfig 和 consumerJsonRpcConfig 根据需要。
If you need to talk to multiple endpoints, you can send in a different consumerRpcConfig and consumerJsonRpcConfig as needed.
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，将每个实例分配给一个变量;然后你可以传递它。
To define multiple copies of EasyXDM as shown above, use the "noConflict", assign each instance to a variable; and then you can pass that around.
这篇关于一页中有多个easyXDM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
