通过 AJAX 加载脚本标签

Posted 2023-03-15

【中文标题】通过 AJAX 加载脚本标签

【英文标题】：Loading script tags via AJAX

【发布时间】：2010-12-20 12:16:31

【问题描述】：

我有一个通过 ajax 调用填充了脚本的 div 标签，但脚本没有执行。

有没有办法让脚本执行？

【问题讨论】：

有没有与这个问题相关的代码？

非常模糊的问题。请提供代码和示例。

-- 转储到 div 标签客户端。

ASP.NET 2.0 更新面板是技术。

你说的更新面板？您需要通过ScriptManager.RegisterClientScriptBlock 添加这些脚本。框架在插入 DOM 时专门为客户端上的 eval 发送它们。

【参考方案1】：

如果您使用 jQuery 的 .html 方法，它会解析出脚本标签并对其进行评估：

$("div").html('<script type="text/javascript">alert("This should work")</script>');

如果 jQuery 不是一个选项，您可以使用 (1) 正则表达式或 (2) 解析 DOM 树并查找脚本标签自己编写。 （#2 是 jQuery 的做法）

【讨论】：

jQuery 虽然需要被触发，如果我将它包含在发送回客户端的有效负载中，它将不会运行，因为 ajax 下载的脚本没有启动。例外：我可以在脚本标记中设置 defer 标签，IE 会运行它，但这只是 x% 的用户。

这也是为什么 AJAX 请求中的脚本标签不会出现在响应中它们在 html 中的位置的原因。

【参考方案2】：

将内容与代码分开总是一个好主意。通过 AJAX 加载内容，并通过插入 <script> 标记来编写代码。如果您使用的是 jQuery，请使用 $.getScript() 动态加载脚本。

【参考方案3】：

我猜，你是直接将 script 标签写入 innerHTML

这行不通。

document.body.innerHTML+="<script>alert(1)</scr"+"ipt>"; 

你必须使用像这样的 DOM 函数来编写

var tag = document.createElement("script");
tag.innerHTML="alert(1)";
document.body.appendChild(tag); //can be append to any object other than body

或更好地使用jQuery

【讨论】：

问题是脚本包含在 Ajax 有效负载中并在 DIV 内发送到客户端。脚本到达客户端后无法启动，因此存在先有鸡还是先有蛋的问题。

你好，在Ajax返回，什么样的结果？只是javascript代码？或包含脚本标签？如果只是javascript代码，你可以eval或者如果包含脚本标签，你可以在我的帖子中使用上面的例子并用你的div标签更改document.body，然后附加到那里。

您能否更新您的帖子以提供更多信息，例如您的网站和更多解释？因为人们会注意到，他们也会发现你当前的问题，rgds

【参考方案4】：

如果你设置了div的innerHtml，脚本标签应该被执行。我正在使用 $("#divid").load() 加载动态内容并且脚本标签会执行。

如果使用纯 javascript 无法解决问题，请尝试使用 JQuery。

【讨论】：

遗憾的是，事实并非如此。未执行 Ajax 传递到客户端的有效负载的 html 有效负载中的脚本。

【参考方案5】：

在 ajax 加载完成后进行回调，如：

function load_scripts(element_id) 

    if (!document.getElementById) return;

    var elmt = document.getElementById(element_id);
    if (!elmt) return;

    var scripts = elmt.getElementsByTagName('script');
    if (!scripts) return;

    var file = null;
    var fileref = null;
    for (var i = 0; i < scripts.length; i++) 
        file = scripts[i].getAttribute('src');
        if (file) 
            fileref = document.createElement('script');
            fileref.setAttribute('type', 'text/javascript');
            fileref.setAttribute('src', file);
            document.getElementsByTagName('head').item(0).appendChild(fileref);
         else 
            eval(scripts[i].innerHTML);