我正在开发一个网页,我正在进行一个AJAX调用,返回一大块HTML,如:
<div>
<!-- some html -->
<script type="text/javascript">
/** some javascript */
</script>
</div>
我将整个东西插入DOM,但JavaScript没有运行.有没有办法运行它？
一些细节:我无法控制脚本块中的内容(因此我无法将其更改为可以调用的函数),我只需要执行整个块.我无法在响应上调用eval,因为JavaScript位于更大的HTML块中.我可以做某种正则表达式来分离出JavaScript,然后在它上面调用eval,但这很令人讨厌.谁知道更好的方法？
Ed.*_*Ed. 16
通过设置元素的innerHTML属性添加的脚本不会被执行.尝试创建一个新的div,设置它的innerHTML,然后将这个新的div添加到DOM.例如:
<html>
<head>
<script type='text/javascript'>
function addScript()
{
var str = "<script>alert('i am here');<\/script>";
var newdiv = document.createElement('div');
newdiv.innerHTML = str;
document.getElementById('target').appendChild(newdiv);
}
</script>
</head>
<body>
<input type="button" value="add script" onclick="addScript()"/>
<div>hello world</div>
<div id="target"></div>
</body>
</html>
Sco*_*ols 15
如果您使用响应来填充div或其他内容,则不必使用正则表达式.您可以使用getElementsByTagName.
div.innerHTML = response;
var scripts = div.getElementsByTagName('script');
for (var ix = 0; ix < scripts.length; ix++) {
eval(scripts[ix].text);
}
虽然@Ed接受了答案.不适用于当前版本的Firefox,谷歌浏览器或Safari浏览器我设法擅长他的例子,以调用动态添加的脚本.
必要的更改仅在脚本添加到DOM的方式中.而不是添加它作为innerHTML技巧是创建一个新的脚本元素并添加实际的脚本内容作为innerHTML创建的元素,然后将脚本元素追加到实际的目标.
<html>
<head>
<script type='text/javascript'>
function addScript()
{
var newdiv = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = "Dynamically added text";
newdiv.appendChild(p);
var script = document.createElement('script');
script.innerHTML = "alert('i am here');";
newdiv.appendChild(script);
document.getElementById('target').appendChild(newdiv);
}
</script>
</head>
<body>
<input type="button" value="add script" onclick="addScript()"/>
<div>hello world</div>
<div id="target"></div>
</body>
</html>
这适用于Firefox 42,Google Chrome 48和Safari 9.0.3
| 归档时间： |
|
| 查看次数： |
45727 次 |
| 最近记录： |