在由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