javascript - 脚本未直接加载

Question

我正在通过 ajax 加载 HTML 部分。通过在现有节点上使用 innerHTML 将部分附加到 DOM。

该部分在底部包含一些脚本标记，例如:

<script src="/Scripts/Griffin.Editor.js" type="text/javascript"></script>
<script type="text/javascript">
            marked.setOptions({
                renderer: new marked.Renderer(),
                gfm: true,
                tables: true,
                breaks: false,
                pedantic: false,
                sanitize: true,
                smartLists: true,
                smartypants: false
            });
            var textParser = {
                parse: function (text) {
                    return marked(text);
                }
            }
            var prismHighlighter = {
                highlight: function (blockElements, inlineElements) {
                    blockElements.forEach(function(item) {
                        Prism.highlightElement(item);
                    });

                }
            };
            var editor = new Griffin.Editor('editor', textParser);
            editor.syntaxHighlighter = prismHighlighter;
            editor.preview();
</script>

但是，由于脚本标签未执行，因此我遍历加载的部分以识别所有脚本标签。然后，我在 DOM 中创建新的脚本节点并将它们附加到 HEAD。

类似于:

var scripts = viewElem.getElementsByTagName('script');
for (let i = 0; i < len; i++) {
    var scriptTag = scripts[0];
    let node = document.createElement('script');
    if (scriptTag.src && scriptTag.src.length > 0) {
        node.src = scriptTag.src;
        node.type = scriptTag.type;
    } else {
        node.text = scriptTag.text;
        node.type = scriptTag.type;
        //had eval here before (instead of attaching the embedded script to the HEAD).
    }
    document.head.appendChild(node);
    scriptTag.parentNode.remove(scriptTag);
}

据我了解，浏览器应该在调用嵌入脚本之前加载引用的脚本。但对我来说情况并非如此，因为 JS 控制台提示找不到依赖脚本中定义的对象。

如果我使用计时器并评估其中的嵌入脚本，一切都会正常。但这似乎是一个丑陋的解决方法，我真的很想了解加载行为背后的机制(即为什么当部分附加到 DOM 时不执行脚本，以及为什么当我将节点添加到HEAD 标签)。

Answer 1

根据我的经验，您无法在 Ajax 响应中立即执行 JavaScript。原因是您正在尝试在另一个 JavaScript 函数中执行 JavaScript。因此浏览器不知道在这种情况下使用哪个执行上下文。

我建议使用您提到的延迟执行。除此之外，您需要先让浏览器解释 Ajax 响应。例如:

$.get('url', function (html) {
    // html = "<script>function myTest () { console.log('here'); }</script>"
    $('#result').html(html);
    // Now that the DOM has had time to parse the response we can do:
    myTest();
});

请注意，这是调用响应函数的 Ajax 回调，而不是立即执行本身的响应。希望这会有所帮助。