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調用時不起作用

回答

相關問題