javascript - 获取 HTML 的 Ajax 请求不执行脚本

Question

我在这里多次看到这个问题，有很多不同的答案。当我从 JQuery 1.5.1 迁移到 1.9.1 时，此代码停止工作。

$.ajax(
    {
        type: 'GET',
        url: MapPath($(this).attr('path')),
        cache: false,
        data: '{}',
        dataType: 'html',
        success: function (result) {
            result = $.parseHTML(result);

            $('#dialog').html(result);
            $('#dialog').dialog('open');
            }
        }
    });

结果包含指向具有 src 属性的 javascript 文件的链接。在我升级之前，脚本被添加到#dialog 容器后加载并执行。现在却没有了。根据一个建议，我在 parseHTML() 方法之后尝试了这个:

$.getScript("/myscript.js");

效果很好，但这不是我想要的。装载容器不必知道有关装载容器的任何信息。如果加载的容器需要包含脚本，则该脚本需要在加载容器时运行。

我已经尝试了查找脚本元素然后对其进行 eval() 的建议。但是一旦我 parseHTML() 脚本就不再存在了。为什么我必须使用 parseHTML() 请参阅我的其他 question .

也许这些事情是相关的。

Answer 1

由于浏览器处理脚本的方式，开始使用 html 加载脚本是不安全的(在 html 准备好操作之前或之后，它可能会不一致地执行)。相反，请解析该字符串，以便稍后加载脚本。

$.ajax({
    type: 'GET',
    url: MapPath($(this).attr('path')),
    cache: false,
    success: function (result) {
        result = result.replace(/<script/ig, '<div class="i-script"')
                       .replace(/<\/script/ig, '</div');
        result = $.parseHTML(result);
        var scripts = $(result).find('.i-script').addBack().filter('.i-script').detach();
        $('#dialog').html(result);
        scripts.each(function(i,script){
            $.getScript($(script).attr('src'));
        });
        $('#dialog').dialog('open');
    }
});

显然，上面的代码仅适用于外部脚本，您可以轻松修改它以也适用于内联脚本。