根据单击的项目加载 JavaScript

Load javascript based on clicked item

本文关键字:加载 JavaScript 项目 单击      更新时间:2023-09-26

我的项目目录中有三个小部件,并希望根据点击在同一个 html 页面中显示所有三个小部件。例如,我有三个DOM元素Widget A,Widget B,Widget 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>

对于单个小部件,脚本工作正常并成功加载小部件(需要删除selection逻辑)。但是当我添加多个小部件时,它不会加载脚本/小部件。我没有删除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>