Ajax调用后在哪里加载脚本? (redux) [英] Where are scripts loaded after an ajax call? (redux)

问题描述

在上一个SO帖子中找到了解决方案动态加载带有嵌入式<script>标签的页面的问题.但是，正如我发现的那样，它不是一个全面的解决方案.破坏代码的场景(请查看上一篇文章及其解决方案)是这样的:

in a previous SO post a solution was found to the issue of dynamically loading pages with embedded <script> tags. however, it was not a comprehensive solution, as I've come to find. The scenario that breaks the code (please review previous post and its solution), is something that looks like this:

-svc.html-

<script type="text/javascript" src="/plugin.js" css="/plugin.css"></script>
<script type="text/javascript">
plugin_method();
</script>

<div id='inner'>
dynamically loaded content
</div>

其中plugin.js看起来与以前相同，但是包含plugin_method的函数定义.

where plugin.js looks the same as before but contains a function definition for plugin_method.

问题似乎是当脚本节点添加到文档中时:

The problem seems to be that when the script node is added to the document:

target[0].appendChild(scriptNode);

该代码不会立即执行.如果(如前一篇文章所述)在svc.html页中只有一个脚本标签，则一切正常，但是一旦有了第二个，则插件中的$('script:last')不再指向正确的脚本，因此无法加载样式表.

the code is not executed immediately. If (as in the previous post) there is only one script tag in the svc.html page, everything is fine, but once there is a second one, the $('script:last') in the plugin no longer points to the correct script, and therefore fails to load the stylesheet.

此外，第二个script标记的主体似乎在为第一个script的代码采购之前就已执行，从而使方法调用失败(因为尚未定义函数).

furthermore, the body of the second script tag seems to get executed before sourcing-in the code for the first, such that the method call fails (since the function hasn't been defined yet).

我找到了几个链接，这些链接正在我的研究中:

I've found a couple of links, which I'm mulling over:

http://requirejs.org/docs/why.html http://unixpapa.com/js/dyna.html

是任何人的想法吗?

推荐答案

好，所以答案是我们不能只遍历脚本列表-我们需要在 load 事件中递归，就像这样:

ok, so the answer is we can't just iterate through the list of scripts - we need to recurse within the load event, like this:

// inspired by Kevin B's suggestions
// at: http://stackoverflow.com/questions/8234215/where-are-scripts-loaded-after-an-ajax-call

(function ($) {
    $.fn.loadWithJs = function (o) {
        console.log(".loadWithJs - started");
        var target = this;

        target.addScript = function (scripts, n, success) {
            var script = scripts[n];

            var scriptNode = document.createElement('script');
            for (var i = 0; i < script.attributes.length; i++) {
                var attr = script.attributes[i];
                $(scriptNode).attr(attr.name, attr.value);
            }
            scriptNode.appendChild(
                document.createTextNode($(script).html())
            );
            $(scriptNode).load(function () {
                if (++n < scripts.length)
                    target.addScript(scripts, n, success);
                else if (success)
                    success();
            });
            target[0].appendChild(scriptNode);
        };

        var success = o.success;
        o.success = function (html) {
            // convert script tags
            var h = $('<div />').append(
                html.replace(/<(\/)?script/ig, "<$1codex")
            );
            // detach script divs from html
            var scripts = h.find("codex").detach();
            // populate target
            target.html(h.children());
            // start recursive loading of scripts
            target.addScript(scripts, 0, success);
        };

        $.ajax(o);
    };
})(jQuery);

*编辑*

好的，那也不行.如果我们在main.html的末尾添加一个脚本标记，它将在第一个load事件触发之前(并且在脚本运行之前)添加到$('script')数组中，因此也将添加到$('script:last ')仍然是错误的.嗯...

ok, that doesn't work either. If we add a script tag at the end of main.html, it gets added to the $('script') array before the first load event fires (and before the scripts get run) and therefore $('script:last') is still wrong. grr...

这篇关于Ajax调用后在哪里加载脚本? (redux)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！