在由AJAX检索的<div>中执行<script>

有一个名为“内容”的div:

<div id="content"></div> 

它应该填充来自AJAX的PHP文件的数据,包括一个<script>标签。 但是,该标签内的脚本没有被执行。

 <div id="content"><!-- After AJAX loads the stuff that goes here --> <script type="text/javascript"> //code </script> <!-- More stuff that DOES work here --> </div> 

作为DOM文本插入的JavaScript将不会执行。 但是,您可以使用dynamic脚本模式来实现您的目标。 基本的想法是将你想执行的脚本移动到外部文件中,并在获得Ajax响应时创build脚本标记。 然后设置脚本标签的src属性,并加载并执行外部脚本。

这个其他的StackOverflow文章也可能对你有所帮助: 脚本可以用innerHTML插入吗? 。

我用这个代码,它工作正常

 var arr = MyDiv.getElementsByTagName('script') for (var n = 0; n < arr.length; n++) eval(arr[n].innerHTML)//run script inside div 

如果你像这样通过Ajax加载你的div中的脚本块:

 <div id="content"> <script type="text/javascript"> function myFunction() { //do something } myFunction(); </script> </div> 

…它只是更新您的页面的DOM,myFunction()不一定会被调用。

您可以使用Ajaxcallback方法(如jQuery的ajax()方法)来定义请求完成时要执行的操作。

你所做的与从一开始就加载一个包含JavaScript的页面不同(它会被执行)。

获取某些内容后如何使用成功callback和错误callback的示例:

  $.ajax({ type: 'GET', url: 'response.php', timeout: 2000, success: function(data) { $("#content").html(data); myFunction(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("error retrieving content"); } 

另一个快速和肮脏的方法是使用eval()来执行任何脚本代码,如果您不想使用jQuery或其他库,则将其作为DOM文本插入。

以下是将评估文本中所有脚本标记的脚本。

 function evalJSFromHtml(html) { var newElement = document.createElement('div'); newElement.innerHTML = html; var scripts = newElement.getElementsByTagName("script"); for (var i = 0; i < scripts.length; ++i) { var script = scripts[i]; eval(script.innerHTML); } } 

从服务器收到您的HTML后,请调用此函数。 被警告:使用eval可能是危险的。

演示: http : //plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

这对我使用jQuery是“正常的”,只要你不尝试将XHR返回的HTML附加到文档中。 (查看这个错误报告,显示jQuery的问题。)

这是一个显示它正在工作的例子:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test_1.4</title> <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> <script type="text/javascript" charset="utf-8"> var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" + "$('#a').html('Hooray! JS ran!');" + "<\/script><\/div>"; $(function(){ $('#replaceable').replaceWith($(snippet)); }); </script> </head> <body> <div id="replaceable">I'm going away.</div> </body> </html> 

这里是相当于上面的: http : //jsfiddle.net/2CTLH/

如果你正在注入需要脚本标记的东西,你可能会得到一个未被捕获的语法错误,并说非法令牌 。 为避免这种情况,请务必在closures的脚本标记中转义正斜杠。 即;

 var output += '<\/script>'; 

任何结束标签(如表单标签)也是如此。

这里有一个函数可以用来parsingAJAX响应,特别是如果你使用minifiedjs并且希望它执行返回的Javascript,或者只是想parsing脚本而不把它们添加到DOM,它也会处理exception错误。 我在php4sack库中使用了这个代码,它在库之外很有用。

 function parseScript(_source) { var source = _source; var scripts = new Array(); // Strip out tags while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) { var s = source.toLowerCase().indexOf("<script"); var s_e = source.indexOf(">", s); var e = source.toLowerCase().indexOf("</script", s); var e_e = source.indexOf(">", e); // Add to scripts array scripts.push(source.substring(s_e+1, e)); // Strip from source source = source.substring(0, s) + source.substring(e_e+1); } // Loop through every script collected and eval it for(var i=0; i<scripts.length; i++) { try { if (scripts[i] != '') { try { //IE execScript(scripts[i]); } catch(ex) //Firefox { window.eval(scripts[i]); } } } catch(e) { // do what you want here when a script fails // window.alert('Script failed to run - '+scripts[i]); if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]); } } // Return the cleaned source return source; } 

我有一个类似的post, addEventListener加载Ajax加载没有jQuery

我如何解决这个问题就是在我的stateChange函数中插入调用函数。 我设置的页面是3个button,将3个不同的页面加载到contentArea中。 因为我必须知道哪个button被加载页面1,2或3,我可以很容易地使用if / else语句来确定正在加载哪个页面,然后运行哪个函数。 我试图做的是注册不同的button侦听器,只有当特定的页面被加载,因为元素ID时才工作。

所以…

如果(page1正在加载,pageload = 1)运行函数registerListeners1

那么第2页或第3页也是一样的。

我也被困在同样的问题,然后经过大量的打击和审判,我find了解决办法。

 $.ajax({ type: 'GET', url: '/url', data: { q: str }, success: function(data){ $("#divname").html(data); //your js code here } }); 

这似乎是完美的。

另一个要做的就是用一个脚本加载页面,例如:

 <div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'> <script type="text/javascript"> function myFunction() { //do something } myFunction(); </script> </div> 

这将加载页面,然后运行该脚本,并在运行该function时删除事件处理程序。 这不会在ajax加载后立即运行,但如果您正在等待用户inputdiv元素,这将工作得很好。

PS。 需要jquery