Question

我有一个包含大量javascripts的页面。我有内容，它有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效果。我认为需要重新加载javascripts但是在ajax请求之后我该怎么办呢？

由于

Answer 1

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

Answer 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
});

Answer 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中删除旧脚本也是个好主意。

如何在ajax请求后重新加载所有的javascript？

3 个答案: