Question

我在html模板文件中嵌入了javascript代码。当我通过ajax加载此模板并将其注入DOM时，javascript代码无法正常运行。

有谁知道如何让这个javascript代码正常执行？

万分感谢！

Answer 1

eval（）通常是如何触发JS插入页面的 - 否则，如果它以某种方式连接到DOM，则需要在编写后通过调用方法或触发事件来触发它。

Answer 2

您可以使用像mootools这样的js库。它可以选择在通过AJAX加载的内容上执行javascript代码。

基本上它解析html查找脚本标记，提取这些脚本并使用window.execScript（如果可用）执行它或将脚本注入DOM。我认为一旦你在一个变量中有脚本内容，你就可以使用eval。

Answer 3

~~您的Javascript可能会调用document.write 如果是这样，就没有解决方案;你需要重写Javascript。~~

编辑：您需要使用<script>手动运行插入的eval块。

jQuery可以自动执行此操作：

$('#someId').html(yourHtmlString);

Answer 4

只需将您的ajax模板加载到iframe中，并让您的模板包含基本的html结构。然后，无论您使用哪个脚本块，它们都将被执行。

Answer 5

你可以将它分成两个文件，一个在.html中，另一个在.js中，加载两个文件并评估js。

或者你可以让JS自己编写html页面，所以你不需要.html页面。

Answer 6

有几种方法可以解决这个问题。我不确定你的js是如何与你提到的模板文件相关的，但是如果你想执行作为XHR请求的响应而收到的JS文件，则以下答案适用。

Sol 1使用Eval：

xhr.onreadystatechange = function(){
 if( xhr.readyState === 4 ){
    eval ( xhr.responseText );
 }
}

Sol 2使用动态注入

xhr.onreadystatechange = function(){
  if ( xhr.readystate === 4 ){
    var head = document.getElementsByTagName("HEAD")[0];
    var script = document.createElement("SCRIPT");
    script.text = xhr.responseText;
    head.appendChild(script);
  } 
}

这将在头部创建一个脚本元素，并将其文本设置为AJAX响应。有了这个，你的JS将被解析但不会被执行。如果您希望它立即执行，您可以故意在响应的最后一行中调用它，如下所示：

//JS that you fetch
function A(){
}

// call A here so that it executes when this script is injected.
A()

上述解决方案的唯一问题是XHR为您带来的相同域名限制。如果要从不同的域动态包含脚本，可以使用更简单的东西：

var scr = document.createElement("SCRIPT");
scr.src = "dynamically set this to the external script source"
document.getElementsByTagName("HEAD")[0].appendChild(scr);

还有其他方法，如其他回复中提到的IFRAME方法。

如何解读通过ajax发送的javascript代码？

6 个答案: