javascript - 处理对脚本的多次调用

Question

我在加载时使用嵌入脚本 HTML表格与 JS在网页中加载时进行验证。目前，页面上仅加载一个脚本。如果我们在单个页面上添加更多嵌入脚本，最后添加或加载的脚本将起作用，其相关表单和验证将执行。我正在尝试在单个页面中运行多个嵌入脚本。
这是当前嵌入脚本模式 放置在 HTML 页面中:

<script src="http://link-to-my-embed-code-executer/embed_form.js"></script>
<div id="12345wertyui67890" class="form_wrap"><!-- HTML form with validation loads here --></div>
<script>
    window.onload = function() {
        EmbedManager.embed({
            key:"12345wertyui67890",
            is_embed_form:"1",
            external_style:"1"
        })
    }
</script>

这是 embed_form.js 中的当前脚本

var EmbedManager = {
    key: '',
    is_embed_form: !0,
    external_style: 0,
    resizeCallback: function() {},
    init: function(embedParams) {
        EmbedManager.key = embedParams.key;
        EmbedManager.is_embed_form = embedParams.is_embed_form;
        EmbedManager.external_style = embedParams.external_style;
        EmbedManager.serverUrl = ''; // Here is the URL which provide HTML Form as response
    },
    embed: function(embedParams) {

        var xhr = new XMLHttpRequest();
        xhr.open('POST', EmbedManager.serverUrl);        
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.onload = function() {
            if (xhr.status !== 200) {
                document.getElementById(EmbedManager.key).innerHTML = "Unable to load form"
            }
            var response = JSON.parse(xhr.responseText);

            // Attempt to get the element using document.getElementById
            var elementDOC = document.getElementById(EmbedManager.key);
            // If it isn't "undefined" and it isn't "null", then it exists.
            if ((typeof(elementDOC) != 'undefined') && (elementDOC != null) && (EmbedManager.is_embed_form)) {
                // Only for Form, not used in LP
                document.getElementById(EmbedManager.key).innerHTML = response.form_html;
            }
        }

        // More code here to load Form in place of embed script & do validations

    }
}

我正在尝试管理 JS 中的更新文件，因为嵌入脚本已经提供给客户，我对在这些嵌入脚本中进行更大的更新不感兴趣。如果它可以在 JS 内部处理文件，会更好。
我想要做的是添加一个新功能 remapEmbed这将是当前 embed 中代码的副本函数 & 之后也将替换 embed 中的代码函数以这种方式从嵌入脚本收集多个请求并创建一个数组，稍后我将调用 remapEmbed功能来完成剩下的工作。我知道那里也需要一些小的改动，我稍后会研究它。
这是 embed_form.js 中的预期脚本

var EmbedManager = {
    key: '',
    is_embed_form: !0,
    external_style: 0,
    resizeCallback: function() {},
    init: function(embedParams) {
        EmbedManager.key = embedParams.key;
        EmbedManager.is_embed_form = embedParams.is_embed_form;
        EmbedManager.external_style = embedParams.external_style;
    },
    remapEmbed: function(embedParams) {
        // Code which was in `embed` function
        // More code here to load Form in place of embed script & do validations
    },
    embed: function(embedParams) {
        // Code to collect request & make a array
        // Expecting to add codes here

        // Later will call `remapEmbed` function & do rest.
        EmbedManager.remapEmbed(embedParamsOne);
    }
}

但问题是我只收到来自页面上添加的最后一个嵌入脚本的调用。这可能是因为最后一个调用覆盖了以前的调用。如何处理多个请求？
我在这里添加 Codepen ，所以你可以检查代码。

Answer 1

Unfortunately, you cannot place multiple onload events on a singlepage. You can nest multiple functions within the one onload call. Ref

它适用于您的脚本。因为您在 Onload 中调用嵌入脚本。确保最后 window.onload 中的所有脚本功能。
将 html 更改为

<!-- The embed code that will not replace with the response -->
<div id="12345AAA67890" class="form_wrap">HTML form with validation loads here: First Embed Code</div>

<!-- This embed code will be replaced with HTML content -->
<div id="12345BBB67890" class="form_wrap">HTML form with validation loads here: Second Embed Code</div>
<script>
    window.onload = function() {
        EmbedManager.embed({
            key:"12345BBB67890",
            is_embed_form:"1",
            external_style:"1"
        })
      EmbedManager.embed({
            key:"12345AAA67890",
            is_embed_form:"1",
            external_style:"1"
        })
    }
</script>

希望这是您正在寻找的解决方案。