Javascript 在 AJAX 调用时不起作用答案

【问题标题】：Javascript does not work upon AJAX callJavascript 在 AJAX 调用时不起作用
【发布时间】：2011-04-11 19:38:52
【问题描述】：

我有一个执行 AJAX 调用并加载整个页面的页面。被加载的页面有一些 Javascript。 javascript 在加载时会自行在页面上运行，但是当它被 AJAX 加载时，Javascript 不起作用。我不知道我错过了什么。

加载页面的代码

<html>
<script type="text/javascript">
function showfield(name){
if(name=='lstbox')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";
}

function hidefield() {
document.getElementById('div1').style.display='none';
}

</script>

<head>
</head>
<body onload="hidefield()">
<form action = "test2.php" method = "post">

Please enter a name for the App <input type = "text" name = "name">

<table border = "1"><tr><th>Choose a Label</th><th>Choose an element</th></tr>

<tr><td><input type = "text" name = "label1" /></td> <td> 

<select name = "elementtype1" id="elementtype1" onchange="showfield(this.options[this.selectedIndex].value)">

<option value = 'select'> Select </option>

<option value='txtbox'>Text Box</option>

<option value='lstbox'>List Box</option>

<option value='chkbox'>Check Box</option>

<option value='radio'>Radio Button</option>

</select></td><td><div id="div1">Enter Listbox options: <input type="text" name="whatever1" /></div></td></tr>

</table>

<input type = "submit" value = "Submit">

</form>

</body>

</html>

加载（AJAX）页面的代码是

<html>
<head>
</head>
<body>

<script src="ajax.js" type="text/javascript"></script>
<script src="responseHTML.js" type="text/javascript"></script>

<div id="storage" style="display:none;">
</div>

<div id="displayed">



<FORM name="ajax" method="POST" action="">
    <p>

    <INPUT type="BUTTON" value="Get the Panel"  ONCLICK="loadWholePage('appcreator.php')">

    </p>

</FORM>
</div>



</body>
</html>

ajax.js 代码

function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
        try {
            request = new XMLHttpRequest();
        }
        catch (err1) 
        {
            request = false;
        }
            }
        }
    return request;
}

responseHTML.js 代码

function getBody(content) 
{
   test = content.toLowerCase();    // to eliminate case sensitivity
   var x = test.indexOf("<body");
   if(x == -1) return "";

   x = test.indexOf(">", x);
   if(x == -1) return "";

   var y = test.lastIndexOf("</body>");
   if(y == -1) y = test.lastIndexOf("</html>");
   if(y == -1) y = content.length;    // If no HTML then just grab everything till end

   return content.slice(x + 1, y);   
} 

/**
    Loads a HTML page
    Put the content of the body tag into the current page.
    Arguments:
        url of the other HTML page to load
        id of the tag that has to hold the content
*/      

function loadHTML(url, fun, storage, param)
{
    var xhr = createXHR();
    xhr.onreadystatechange=function()
    { 
        if(xhr.readyState == 4)
        {
            //if(xhr.status == 200)
            {
                storage.innerHTML = getBody(xhr.responseText);
                fun(storage, param);
            }
        } 
    }; 

    xhr.open("GET", url , true);
    xhr.send(null); 

} 

    /**
        Callback
        Assign directly a tag
    */      


    function processHTML(temp, target)
    {
        target.innerHTML = temp.innerHTML;
    }

    function loadWholePage(url)
    {
        var y = document.getElementById("storage");
        var x = document.getElementById("displayed");
        loadHTML(url, processHTML, x, y);
    }   


    /**
        Create responseHTML
        for acces by DOM's methods
    */  

    function processByDOM(responseHTML, target)
    {
        target.innerHTML = "Extracted by id:<br />";

        // does not work with Chrome/Safari
        //var message = responseHTML.getElementsByTagName("div").namedItem("two").innerHTML;
        var message = responseHTML.getElementsByTagName("div").item(1).innerHTML;

        target.innerHTML += message;

        target.innerHTML += "<br />Extracted by name:<br />";

        message = responseHTML.getElementsByTagName("form").item(0);
        target.innerHTML += message.dyn.value;
    }

    function accessByDOM(url)
    {
        //var responseHTML = document.createElement("body");    // Bad for opera
        var responseHTML = document.getElementById("storage");
        var y = document.getElementById("displayed");
        loadHTML(url, processByDOM, responseHTML, y);
    }

【问题讨论】：

标签： javascript ajax

【解决方案1】：

通过 AJAX 加载到 HTML 中的 Javascript 将不会被执行。

如果要动态包含脚本，请将<script> 标记附加到现有加载页面的<head> 元素。

【讨论】：

【解决方案2】：

使用 jquery 而不是使用 innerHTML 执行脚本

//this is not working! 
document.getElementById("chart-content").innerHTML = this.responseText;

//try this
$("#chart-content").html(this.responseText);

【讨论】：

谢谢，我已经搜索了近 2 天来可以使用我的内部 js 脚本的解决方案

【解决方案3】：

脚本在body标签之外，加载器只挑选body标签内的代码，所以脚本甚至不是你添加到页面的一部分。

【讨论】：

感谢您的回答。那我现在该怎么走。我需要让它在 AJAx 调用时工作
@user702813：就像你提取body标签的内容一样，你必须提取script标签的内容，创建一个新的脚本元素，将脚本放入其中并将元素添加到头部元素。

【解决方案4】：

在<head> 中加载你的 Js 应该可以工作。用这个。

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadJs);
} else {
    loadJs();
}

function loadJs() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/assets/script/editor-controlls.js';
    script.defer = true
    document.getElementsByTagName('head')[0].appendChild(script);
}

【讨论】：