Question

我正在尝试使用AJAX获取页面，但是当我获得该页面并且它包含Javascript代码时 - 它不会执行它。

为什么？

我的ajax页面中的简单代码：

<script type="text/javascript">
alert("Hello");
</script>

...并且它不会执行它。我正在尝试使用Google Maps API并使用AJAX添加标记，因此每当我添加一个我执行获取新标记的AJAX页面时，都会将其存储在数据库中，并将标记“动态”添加到地图中。

但由于我无法以这种方式执行单个javascript函数，我该怎么办？

我在页面上定义的功能是预先保护还是私有？

**使用AJAX功能更新**

function ajaxExecute(id, link, query)
{
    if (query != null)
    {
        query = query.replace("amp;", "");
    }

    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            if (id != null)
            {
                    document.getElementById(id).innerHTML=xmlhttp.responseText;
            }
        }
    }

    if (query == null)
    {
        xmlhttp.open("GET",link,true);
    }
    else
    {
        if (query.substr(0, 1) != "?")
        {
            xmlhttp.open("GET",link+"?"+query,true);
        }
        else
        {
            xmlhttp.open("GET",link+query,true);
        }
    }
    xmlhttp.send();
}

** Deukalion的解决方案**

var content = xmlhttp.responseText;

if (id != null)
{

    document.getElementById(id).innerHTML=content;
    var script = content.match("<script[^>]*>[^<]*</script>");

    if (script != null)
    {
        script = script.toString().replace('<script type="text/javascript">', '');
        script = script.replace('</script>', '');
        eval(script);

    }
}

并且在某些事件中，我不得不在脚本addevent侦听器中而不是仅仅创建一个“select onchange ='executeFunctionNotIncludedInAjaxFile（）;'”我必须为此添加事件管理器（“更改”，“函数名称”，“假”）。在正在评估的脚本中。

Answer 1

当您通过执行诸如将容器innerHTML设置为某些更新内容之类的操作来更新页面时，浏览器根本不会在其中运行脚本。您可以找到<script>标记，获取他们的innerHTML（IE可能更喜欢innerTEXT），然后自己eval()脚本（这几乎就是jQuery所做的，尽管它在更新DOM之前使用正则表达式查找脚本。）

Answer 2

使用此功能：

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
        var s = source.indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.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 {
            eval(scripts[i]);
        }
        catch(ex) {
            // do what you want here when a script fails
        }
    }

    // Return the cleaned source
    return source;
}

然后在您替换/添加内容时执行parseScript(xmlhttp.responseText);。

Answer 3

如果有其他人偶然发现这个旧线程，Deukalion接受的答案有一个问题，有一个问题可能被忽略了：正如所写，脚本只查找第一个 script标签。如果存在多个脚本标记，则忽略所有其他标记。

一些小的调整可以解决这个问题。改变一行：

    var script = content.match("<script[^>]*>[^<]*</script>");

要：

    var script = content.match(/<script[^>]*>[^<]*<\/script>/g);

另一个来自：

    script = script.toString().replace('<script type="text/javascript">', '');

要：

    script = script.join("").replace(/<script type="text\/javascript">/g, '');

现在它将收集所有＆lt; script＆gt;代码并按照页面上的顺序执行它们。否则这是一个很好的解决方案。

Answer 4

在AJAX请求之后，您可以创建一个“on success”函数，该函数可以获取返回的html并使用它执行某些操作。然后会执行某些事情。

如果有代码示例，那么我可以提供代码解决方案。但是只使用标准的xmlhttprequest，可以完成以下操作：

xhr = new XMLHttpRequest();
xhr.open("GET","ajax_info.txt",true);
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
  {
  document.getElementById("myDiv").innerHTML = xhr.responseText;
  }
}
xhr.send();

在ajax加载页面后执行javascript脚本 - 不起作用

4 个答案: