我正在开发一个网页,我正在进行一个AJAX调用,返回一大块HTML,如:

<div>
  <!-- some html -->
  <script type="text/javascript">
    /** some javascript */
  </script>
</div>

我将整个东西插入DOM,但JavaScript没有运行。 有没有办法运行它?

一些细节:我无法控制脚本块中的内容(因此我无法将其更改为可以调用的函数),我只需要执行整个块。 我无法在响应上调用eval,因为JavaScript位于更大的HTML块中。 我可以做某种正则表达式来分离出JavaScript,然后在它上面调用eval,但这很令人讨厌。 谁知道更好的方法?

===============>>#1 票数: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>

===============>>#2 票数:15

如果您使用响应来填充div或其他内容,则不必使用正则表达式。 您可以使用getElementsByTagName。

div.innerHTML = response;
var scripts = div.getElementsByTagName('script');
for (var ix = 0; ix < scripts.length; ix++) {
    eval(scripts[ix].text);
}

===============>>#3 票数:8

虽然@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

===============>>#4 票数:2

另一种方法是不仅使用InnerHTML将Ajax调用的返回转储到DOM中。

您可以动态插入每个节点,然后脚本将运行。

否则,浏览器只假定您正在插入文本节点,并忽略脚本。

使用Eval是相当邪恶的,因为它需要启动Javascript VM的另一个实例并且JIT传递的字符串。

===============>>#5 票数:1

最好的方法可能是直接通过DOM识别和评估脚本块的内容。

我会小心的..如果你正在实施这个以克服一些非现场电话的限制你正在打开一个安全漏洞。

无论你实施什么,都可以用于XSS。

===============>>#6 票数:0

您可以使用其中一个流行的Ajax库本地为您执行此操作。 我喜欢Prototype 您可以添加evalScripts:true作为Ajax调用的一部分,它会自动发生。

===============>>#7 票数:-2

下面是一个有点不同的方法,它使用if tag包含type =“text / xml”的事实,里面的JavaScript将不会执行:

function preventJS(html) {
    return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

你可以在这里阅读更多内容 - JavaScript:如何防止在添加到DOM的html中执行JavaScript 如果它适合您,请在此留下评论,其中包含您使用的浏览器和版本的信息。

  ask by kristina translate from so

未解决问题?本站智能推荐:

1回复

从ajax调用执行动态javascript

我有一个Web应用程序,该服务器由服务器端的ASP.NET和客户端的Javascript / jQuery驱动。 我想知道是否可以对ASP.NET WebMethod进行Ajax调用并执行返回的javascript代码。 例如(非常简化的示例): 我的HTML: 在我的C#中:
2回复

执行动态模式弹出窗口

嗨,我在启动动态模式弹出窗口时遇到问题。 我需要通过单击按钮来启动它,此按钮必须将值传输到从数据库中检索某些数据的Web服务。 这是按钮的代码 这是模式弹出窗口的代码 这是我的基本javascript打开弹出窗口 现在,我不知道如何通过按钮调用javascript
1回复

无法在动态加载内容(AHAH)中执行Javascript

当用户使用以下代码单击链接时,我正在将内容动态加载到div中: 效果很好,但是我无法在任何新内容中使用任何javascript,例如jquery datapicker,甚至只是document.write hello world。 代码中的js无法正常工作。 我已经将内容直接加载到浏
1回复

Javascript通过预设对链接进行动态排序

想象一下,我有一个按字母顺序排列的链接目录,比方说1000个链接。 有许多与不同主题相关的链接。 在顶部,我有一些按钮,分别表示“全部”,“移动”,“汽车”,“书籍”,“技术”。 当用户选择使用MOBILE时,他仅获得与智能手机,平板电脑等相关的链接。 当他单击“书籍”时,他会获
1回复

使用Ajax / php / javascript进行动态texbox修改

我有两张桌子。 company_details和company_specials。 每个company_details可以有多个特价。 我在http://eurothermwindows.com/ed/admin.php上显示公司详细信息 活动列中具有0的第一行和第四行来自compa
2回复

如何等待动态加载的脚本在javascript中完全执行?

在javascript中,我加载了几个脚本,然后又想运行一个函数。 问题是,我的承诺为时过早。 它在下载每个文件后运行,但是我需要它等待它们全部添加到DOM中并完全执行。 我该如何解决? 注意:每个html文件都有一个<script>和<template>
4回复

顺序执行动态数量的ajax请求

有以下情况: 我必须显示给定间隔的图形(startDate,endDate) 因为间隔可能很大,所以每天都会检索数据,因此我需要顺序执行多个ajax调用,并将数据附加到图形上(highcharts) 示例间隔为n天==> 我阅读了有关延期的内容,并保证我发现动态天
2回复

AJAX加载中的Javascript块

我正在寻找一种在javascript中提出AJAX加载请求的方法,但是在等待AJAX​​加载完成时让javascript代码暂停执行。 换句话说,我正在尝试执行同步 AJAX加载请求(我知道AJAX中的'A'代表异步。我只是希望名称不完全正确。)。 我有的是 我希望请求是同步的,原因
3回复

如何重新加载javascript代码块

我需要每隔一段时间重新加载一段javascript。 我需要每15秒钟重新加载任何功能的那个块,而无需重新加载页面本身..类似jQuery超时但我不知道如何应用它..任何想法?
1回复

执行动态加载的JavaScript

假设根据某些条件,您的应用程序动态获取了一些脚本。 该动作是同步的还是阻塞的,例如,任何正在进行的HTML渲染都停止了,还是非常规地完成了?