php - javascript XMLHttpRequest 打开 php 文件并执行更多的 javascript

Question

我有一个主页，称之为 Main.php。在此页面上，有一个按钮，单击该按钮后，会使用 Results.php 的结果设置 div 的 innerHTML(已在 Main.php 上，称为 divResults)。

调用 Results.php 时，正确接收返回的 HTML“这些是结果”​​并将其设置为 Main.php 上的 divResults 的内容。但是，不会执行 Results.php 中的任何 javascript。例如，我尝试做一个简单的 window.alert。这是示例代码:

开始操作的 Main.php 链接按钮:

<img src="$MyImageSource" onclick=\"ExpandDropdownDiv()\" />

Main.php javascript 函数 ExpandDropdownDiv():

function ExpandDropdownDiv(){

    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) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","Results.php",true);
    xmlhttp.send();

}

Results.php 代码示例:

<script type="text/javascript">
    alert("Success");
</script>
These Are The Results

----------------编辑-更新----------------

来自 Results.php 的简单警报只是一个示例。如果我能够让它工作，我相信我可以自己解决其余的问题。但是，我注意到一些评论建议在设置 div 的 innerHTML 后将警报放在 Main.php 的 javascript 中。那么，让我解释一下在设置 div 之后我真正想用 javascript 做什么。

图片 1，显示了一些普通的“选择”html 元素，这些元素已使用 jquery 和下拉检查列表扩展名 (.js) 进行了转换。当用户单击底部的彩色向下箭头时，div 展开，(image 2) 并且在另一个 .php 文件中生成另外两个“选择”元素...返回 html，并放在div中。因此，我不需要重新加载整个页面，并且可以将新的选择下拉列表放在现有下拉列表的正下方。

问题是，要“转换”这些普通的选择元素，需要针对该 HTML 执行一些 javascript:

$(document).ready(function() {
     $(".MultiSelect").dropdownchecklist(  {firstItemChecksAll: true, maxDropHeight: 300 , searchTextbox: true, width: 100, textFormatFunction: function(options) {
        var selectedOptions = options.filter(":selected");
        var countOfSelected = selectedOptions.size();
        var size = options.size();
        switch(countOfSelected) {
        case 0: return "All";
        case 1: return selectedOptions.text();
/*      case size: return "All"; */
        default: return countOfSelected + " selected";
        }
    } 
    }
    ); 
}

因此，我需要能够以某种方式对从其他 .php 文件生成的 HTML 执行 javascript。只需调用上面的代码，在我的 div innerHTML 被填充后，只会重新生成已经存在的下拉列表，而不是两个新的下拉列表。

示例图片

Answer 1

这里有一本关于理解你在做什么的好书:Eval embed JavaScript Ajax: YUI style

使用 eval() 使您的代码工作；但由于各种原因不推荐:

让我们把你的 php 修改成这样:

<script type="text/javascript">
    function result() {
        alert("Success");
    }
</script>
These Are The Results

这是来自 AJAX 的回调函数。结果();没有被执行，因为它没有被评估，因此不存在。这是你的情况

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            result(); // this function is embedded in the responseText
                      // and doesn't get evaluated. I.e. it doesn't exist
}

为了让浏览器识别result();，你必须对你注入(inject)的脚本标签中的所有JavaScript语句执行eval();进入带有id divResults的div:

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            var myDiv = document.getElementById("divResults");
            var myscripz = myDiv.getElementsByTagName('script');
            for(var i=myscripz.length; i--;){
                   eval(myscripz[i].innerHTML);
            }
            result(); //alerts success
}

简单方法:

我会做的最简单的方法基本上是从 php 中删除 JavaScript 并显示内容，在回调之后只需在回调函数中执行其余的 JavaScript PHP:

 echo 'These Are The Results';

JavaScript:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        alert('success'); // or whatever else JavaScript you need to do
    }
}