在通过 AJAX 响应发送的页面上执行 javascript 函数 - Execute javascript function on a page sent via AJAX response

Execute javascript function on a page sent via AJAX response

我想执行一个通过服务器通过 AJAX 请求发送的函数。函数体不在调用页中。例如：（完整代码如下）

1.调用PHP脚本：

<script>
 function fun()
 {
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }  
 ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById("rslt").innerHTML = ajaxRequest.responseText;

        }
    }
    ajaxRequest.open("GET", "ajax_js2.php", true);
    ajaxRequest.send(null);
 }
</script>
<input type="button" onclick="fun()">
<div id="rslt">
</div>

2.ajax_js2.php脚本：

<script>
 function test()
 {
   alert("Hello");
 }
</script>
<span onclick="test()">Test AJAX</span>

我知道将"test"的函数定义放在调用脚本中就可以了。但我想把它保留在第二个剧本中。我该怎么办？服务器将跨度作为对客户端的响应返回。单击跨度"测试 AJAX"时，应调用该函数。

插入

DOM <script>标签将不会执行，除非您运行 eval() 。在这里阅读更多：脚本可以使用innerHTML插入吗？

因此，在您的情况下，当您尝试单击跨度时，test()将未定义，因为脚本代码尚未执行（因此从未定义test函数）。

你可以使用这样的东西来解决它（在 DOM 注入之后）：

var scripts = document.getElementById("rslt").getElementsByTagName("script");
for( var i=0; i<scripts.length; i++ ) {
    eval(scripts[i].innerText);
}

（附言 eval不是邪恶的）