Javascript在AJAX调用时不起作用

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

加载页面

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

来源

2011-04-11 Raghu

该脚本位于body标签之外，加载器仅挑选body标签内的代码，所以脚本甚至不是您添加到页面的一部分。

来源

2011-04-11 19:49:58 Guffa

感谢您的回答。那么我现在该怎么办。我需要使它在AJAx调用 – Raghu 2011-04-12 17:37:43

@ user702813上工作：就像提取body标签的内容一样，您必须提取脚本标签的内容，创建一个新的脚本元素，将脚本放入它并添加元素到头元素。 – Guffa 2011-04-12 19:48:41

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

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

来源

2011-04-11 19:42:46 Brad

Javascript在AJAX调用时不起作用

回答

相关问题