javascript - 并非所有内联 JavaScript 都通过 AJAX 执行

Question

我正在通过 AJAX 加载文档的一个片段，并且我已经设法很好地加载“外部”脚本，但是我无法执行内嵌在 <script> 中的所有 JavaScript。标签。

这是我尝试加载的文档片段/HTML 的示例:

    <textarea></textarea>
    <script src="tinyMCE.js" class="ajax-script"></script>
    <script class="ajax-script">
        alert("I'm inline");
        tinymce.init({
            selector: 'textarea',
        });
    </script>

这是我用来加载此文档的 JavaScript 代码(在 XHR status 200 上):

    // * This response is HTML
    response = xhr.responseText;

    // * Set the innerHTML of the body to the response HTML
    document.body.innerHTML = response;

    // * Find all scripts with ajax-script class
    responseScripts = document.getElementsByClassName('ajax-script');

    // * Loop through all those scripts
    for (i = responseScripts.length; i--;) {

        // * Create a 'clone' script element
        cloneScript = document.createElement('script');

        // * If the response script has a src, add it to the clone
        if(responseScripts[0].src) {
            cloneScript.src = responseScripts[0].src;
        }

        // * If the response script has 'inline code', add it 
        if(responseScripts[0].innerHTML) {
            cloneScript.innerHTML = responseScripts[0].innerHTML;
        }

        // * Remove the original script
        responseScripts[0].parentNode.removeChild(responseScripts[0]);

        // * Append the clone script to the document
        document.body.appendChild(cloneScript);
    }

所以，在这个例子中，只有 alert("I'm inline");内联代码的一部分正在执行，但其余部分没有。没有控制台错误，什么都没有，浏览器似乎忽略了 tinymce.init()部分。

我不知道这是否与TinyMCE有关本身？但为什么会这样？我也试过评估代码，但没有成功。文件加载后，我可以复制 tinymce.init()并将其粘贴到控制台，文本编辑器实际显示(因为 tinymce.init() 被执行)。

您有什么理由可以解释为什么只有 alert 吗？函数被调用，而不是其余的？您认为这种加载脚本的方式有什么问题吗？

谢谢。

Answer 1

尽管 David Water 的回应在 Firefox 中起到了作用，但在 Chrome 中却没有。所以，按照jfriend的建议，我把动态列表变成了一个数组，并确保脚本同步加载。这是我所做的:

response = xhr.responseText;
document.body.innerHTML = response;
responseScripts = document.getElementsByClassName('ajax-script');
i = 0;
// * Convert DOM dynamic list into an array
function listToArray(list) {
  var array = [];
  for (var i = list.length >>> 0; i--;) { 
    array[i] = list[i];
  }
  return array;
}
function loadScripts() {
    if(responseScripts[i]) {
        cloneScript = document.createElement('script');
        if(responseScripts[i].src) {
            cloneScript.src = responseScripts[i].src;
        }
        if(responseScripts[i].innerHTML) {
            cloneScript.innerHTML = responseScripts[i].innerHTML;
        }
        responseScripts[i].parentNode.removeChild(responseScripts[i]);
        document.body.appendChild(cloneScript);
        if(cloneScript.src) {
            // * For external scripts, wait 'till they load
            cloneScript.onload = function () {
                loadScripts(i++);
            };
        } else {
            // * For inline scripts, just call the function again
            loadScripts(i++);
        }
    }
}
if(responseScripts.length > 0) {
    responseScripts = listToArray(responseScripts);
    // * Start loading the scripts
    loadScripts();
}