0
我在我的項目目錄中有三個小部件，並希望基於點擊在同一個html頁面中顯示所有三個小部件。例如，我有三個DOM元素Widget A，Widget B，Widget C. 根據點擊事件我必須加載這些小部件，如果我們點擊Widget A，如果點擊Widget B，也應該加載第一個Widget ，第二個小部件應該加載等等。每個小部件都有單獨的腳本。每個小部件都有一個結果和錯誤處理方法。基於點擊的項目加載JavaScript
我的項目結構
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>
對於一個Widget，腳本工作正常，並加載控件成功（需要刪除selection邏輯）。但是當我添加多個小部件時，它不會加載腳本/小部件。我沒有權限刪除function(window, document){}函數。有沒有什麼辦法可以在上面的框架中以較少的修改來完成任務。
從你給出的描述，也很難辨認出你在哪裏卡住了。你能解釋一下嗎？ – gurvinder372
更新了問題。基本上這是我的要求 - 基於點擊的元素，我需要加載小部件腳本。 –
需求被理解，但你卡在哪裏？當您嘗試加載其他腳本時，現在是否有任何錯誤？ – gurvinder372