ajax请求后如何重新加载所有javascript？答案

【问题标题】：How to reload all of javascripts after ajax request?ajax请求后如何重新加载所有javascript？
【发布时间】：2011-11-12 17:26:27
【问题描述】：

我有一个包含大量 javascript 的页面。我有内容，它有 javascript 效果。我想使用ajax将内容更改为另一个内容（当然具有相同的javascript效果）。

这是我的 ajax 请求代码：

<head>
<script type="text/javascript">
function ajax(txt) {
    if (window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("MICROSOFT.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 & xmlhttp.status==200)
        {
            document.getElementById("content").innerHTML=xmlhttp.responseText;

  }
  }
    xmlhttp.open("GET", "index.php?p="+txt, true);
    xmlhttp.send();
}
</script>
</head>
<body>
<div id="content">
...content...
</div>
<input type="button" onclick=ajax('2') value="click" />
</body>

问题是内容已更改，但新内容没有任何 javascript 效果。而且我认为需要重新加载 javascript，但是在 ajax 请求之后我该怎么做呢？

谢谢

【问题讨论】：

你能发布你的javascript效果吗？
页面有很多javascripts的问题，因为它是我从模板商店购买的模板。所以我不能把它们都发在这里

标签： javascript html ajax jquery reload

【解决方案1】：

您不必重新加载您的 javascript 文件。您所要做的就是让“效果”知道您的页面上有新内容。通常你必须再次运行一个函数。如果使用 jquery 函数是 $(document.ready(...))。如果你的“效果”没有被包装在一个函数中而不是包装它们并在内容更改时调用这个函数。

【讨论】：

但是页面有很多javascript函数和文件，我不知道影响内容的函数到底在哪里，因为我没有制作页面，我买了它，现在我'我正在尝试编辑它。

【解决方案2】：

如果重新加载Javascript文件是解决办法，你可以试试这个功能：

function inject(src, cb, target){
    target = target || document.body;
    var s = document.createElement('SCRIPT');
    s.charset = 'UTF-8';
    if(typeof cb === 'function'){ 
        s.onload = function(){
            cb(s);
        }; 
        s.onreadystatechange = function () {
            (/loaded|complete/).test(s.readyState) && cb(s);
         };                     
    }
    s.src = src;
    target.appendChild(s);
    return s;
};

并使用它：

inject('path/to/new.js');

如果你想在文件加载时触发一个动作，或者使用回调函数：

inject('path/to/new.js', function(s){
  //the file is loaded
});

【讨论】：

嗯，这可能意味着，Ivan 是对的，问题出在其他地方

【解决方案3】：

在新旧 content 块中包含用于效果的 JavaScript，并在插入新节点后重新运行效果脚本，如下所示：

/** 
 * Evaluates scripts included via innerHTML.
 * @param {Node} node Node containing scripts.
 * */
function evalScripts(node){
    if (!node) return;

    var st = node.getElementsByTagName('SCRIPT');
    var strExec;

    for (var i = 0; i < st.length; i++) {
        strExec = st[i].text;
        //st[i].parentNode.removeChild(st[i]);
        st[i].text = '';

        try {
            var x = document.createElement('script');
            x.type = 'text/javascript';
            x.innerHTML = strExec;

            document.getElementsByTagName('head')[0].appendChild(x);
        } 
        catch (bug) {}
    }
};

如果您计划进行大量此类操作，最好以某种方式从head 中删除旧脚本。

【讨论】：