我的项目目录中有三个小部件，并且希望根据点击在同一 html 页面中显示所有三个小部件。例如，我有三个 DOM 元素小部件 A、小部件 B、小部件 C。基于单击事件，我必须加载这些小部件，如果我们单击小部件 A，则第一个小部件应该同样加载，如果我们单击小部件 B，第二个小部件应该加载，依此类推。每个小部件都有单独的脚本。每个小部件都有一个结果和错误处理方法。
我的项目结构
Widgets Folder
|--index.html
|--lst/lst.js
|--loc/loc.js
|--ret/ret.js
这是我的 HTML 代码
<div id="WIDGETA"></div>
<div id="WIDGETB"></div>
<div id="WIDGETC"></div>
<div id="a"><span>Widget A</span></div>
<div id="b"><span>Widget B</span></div>
<div id="c"><span>Widget C</span></div>
和 JavaScript
<script>
var selection;
document.getElementById("a").addEventListener("click",function(){
alert("first widget");
selection = "lst";
});
document.getElementById("b").addEventListener("click",function(){
alert("second widget");
selection = "loc";
});
document.getElementById("c").addEventListener("click",function(){
alert("third widget");
selection = "ret";
});
(function(window, document) {
var loader = function() {
var script = document.createElement("script"),
tag = document.getElementsByTagName("script")[0];
var lstScript = "lst/lst.js";
var locScript = "loc/loc.js";
var retScript = "ret/ret.js";
switch(selection){
case "lst" : script.src = lstScript;
break;
case "location" : script.src = locScript;
break;
case "return" : script.src = retScript;
break;
}
function handleError() {
var errorMsg = "Ooops, Widget failed to load. :(";
var errorEvent = new CustomEvent('widgetErrorHandler', {
'detail': errorMsg
});
document.getElementById("WIDGETA").dispatchEvent(errorEvent);
document.getElementById("WIDGETB").dispatchEvent(errorEvent);
document.getElementById("WIDGETC").dispatchEvent(errorEvent);
}
script.async = true;
tag.parentNode.insertBefore(script, tag);
};
window.location_options = {
lst_widget_open_ref_id: '#WIDGETA',
loc_widget_open_ref_id: '#WIDGETB',
ret_widget_open_ref_id: '#WIDGETC'
};
window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
})(window, document);
// result handling WidgetA
document.getElementById("WIDGETA").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetA
document.getElementById("WIDGETA").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
// result handling WidgetB
document.getElementById("WIDGETB").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetB
document.getElementById("WIDGETB").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
// result handling WidgetC
document.getElementById("WIDGETC").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetC
document.getElementById("WIDGETC").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
</script>
对于单个小部件，脚本工作正常并成功加载小部件(需要删除选择逻辑)。但是当我添加多个小部件时，它不会加载脚本/小部件。我无权删除 function(window, document){} 函数。有没有什么方法可以在上述框架中较少修改的情况下完成任务。
最佳答案
我可以提出这个:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="WIDGETA"></div>
<div id="WIDGETB"></div>
<div id="WIDGETC"></div>
<div id="a"><span>Widget A</span></div>
<div id="b"><span>Widget B</span></div>
<div id="c"><span>Widget C</span></div>
<script>
var selection;
(function(window, document) {
var loader = function() {
var script = document.getElementsByTagName("script")[0];
if (script['async']) {
script.remove();
}
script = document.createElement("script");
tag = document.getElementsByTagName("script")[0];
var lstScript = "lst/lst.js";
var locScript = "loc/loc.js";
var retScript = "ret/ret.js";
switch(selection){
case "lst" :
script.src = lstScript;
break;
case "loc" :
script.src = locScript;
break;
case "ret" :
script.src = retScript;
break;
}
function handleError() {
var errorMsg = "Ooops, Widget failed to load. :(";
var errorEvent = new CustomEvent('widgetErrorHandler', {
'detail': errorMsg
});
document.getElementById("WIDGETA").dispatchEvent(errorEvent);
document.getElementById("WIDGETB").dispatchEvent(errorEvent);
document.getElementById("WIDGETC").dispatchEvent(errorEvent);
}
script.async = true;
tag.parentNode.insertBefore(script, tag);
};
window.location_options = {
lst_widget_open_ref_id: '#WIDGETA',
loc_widget_open_ref_id: '#WIDGETB',
ret_widget_open_ref_id: '#WIDGETC'
};
var addEvent = function (o, fn) {
o.addEventListener ? o.addEventListener("click", fn, false) : o.attachEvent("onclick", fn);
}
addEvent(document.getElementById("a"), function(){
//alert("first widget");
selection = "lst";
loader();
});
addEvent(document.getElementById("b"),function(){
//alert("second widget");
selection = "loc";
loader();
});
addEvent(document.getElementById("c"),function(){
//alert("third widget");
selection = "ret";
loader();
});
})(window, document);
// result handling WidgetA
document.getElementById("WIDGETA").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetA
document.getElementById("WIDGETA").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
// result handling WidgetB
document.getElementById("WIDGETB").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetB
document.getElementById("WIDGETB").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
// result handling WidgetC
document.getElementById("WIDGETC").addEventListener('store', function(e) {
alert("Got result from Widget - A");
}, false);
// error handling WidgetC
document.getElementById("WIDGETC").addEventListener('widgetErrorHandler', function(e) {
alert("Error loading Widget - A");
}, false);
</script>
</body>
</html>
关于javascript - 根据点击的项目加载 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35860292/