come eseguire javascript in HTML caricato tramite Ajax

Ho un file index.php che carica altri file php tramite questo codice javascript / ajax:

function AJAX(elementID,url,showStatus){ var httpObject; if (window.ActiveXObject) { httpObject = new ActiveXObject("Microsoft.XMLHTTP"); } if (window.XMLHttpRequest){ httpObject = new XMLHttpRequest(); } else { alert("Your browser does not support AJAX."); } if (httpObject != null) { httpObject.onreadystatechange = function() { if (elementID != false){ if (httpObject.readyState == 4 && httpObject.status == 200) { document.getElementById(elementID).innerHTML= httpObject.responseText; } } } httpObject.open("POST",url,true); httpObject.send(null); } } 

quindi per esempio vorrei caricare un file in inxex.php da:

  AJAX("updateThisDiv", "/includes/contentpage.php", false)  

che incollerebbe il contenuto di “contentpage.php” nel div “updateThisDiv” ma ora se ho qualche javascript su “contentpage.php”, non funzionerà, c’è un modo per farlo?

Ho visto questo: http://www.javascriptkit.com/script/script2/ajaxpagefetcher.shtml ma non è esattamente quello che stavo cercando.

Voglio essere in grado di aggiornare una sezione della mia pagina senza ricaricare l’intera pagina e javascript deve essere eseguito

Se vuoi caricare Javascript su richiesta. Questo può essere fatto creando dynamicmente un tag script. Questo modello illustrato nel libro di Stoyan Stefanov – Javascript Patterns

Questo è stato tagliato dal libro:

Scrivi una funzione di richiesta. Quindi chiamalo così:

 require("extra.js", function () { functionDefinedInExtraJS(); }); 

Il campione richiede la funzione:

 function require(file, callback) { var script = document.getElementsByTagName('script')[0], newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { callback(); } }; // others newjs.onload = function () { callback(); }; newjs.src = file; script.parentNode.insertBefore(newjs, script); } 

Esempio dal vivo trovato in http://www.jspatterns.com/book/8/ondemand.html

@ Modifica: maggiori dettagli specifici per il tuo caso. Cercherò di rendere le cose semplici:

Crea quattro file:

  • index.php: il file di test.
  • code.js: codice attuale che ha funzioni Ajax, getJS, getHTML
  • content.php: qualsiasi file PHP che stamperà puro HTML senza JS
  • content.js: codice javascript che si desidera eseguire dynamicmente.

index.php

       

content.php

 Hello, I am dynamic span came from content.php 

content.js

 //Ana javascript code you want to run it by Ajax function should go inside this function function executeJS(element){ element.innerHTML = "Hello, I am dynamic span came from content.js"; } 

code.js

 //This function responsible for doing the ajax request for any file that will return pure HTML. function getHTML(url, element){ var i, xhr, activeXids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (typeof XMLHttpRequest === "function") { // native XHR xhr = new XMLHttpRequest(); } else { // IE before 7 for (i = 0; i < activeXids.length; i += 1) { try { xhr = new ActiveXObject(activeXids[i]); break; } catch (e) {} } } xhr.onreadystatechange = function () { if (xhr.readyState !== 4) { return false; } if (xhr.status !== 200) { alert("Error, status code: " + xhr.status); return false; } element.innerHTML += xhr.responseText; }; xhr.open("GET", url, true); xhr.send(""); } //This function will load javascript file on-demand and call executeJS function inside that file. function getJS(url, element, cb){ var newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { cb(); } }; // others newjs.onload = function () { cb(); }; newjs.src = url; element.appendChild(newjs); } //This is same as your function, but now can handle both PHP and JS files function Ajax(url, id){ var element = document.getElementById(id), regex = /\.js$/; if(!element){ alert("Invalid ID"); return false; } if(regex.test(url)){ //If url ends with JS, load using getJS getJS(url, element, function(){ executeJS(element); }); } else { getHTML(url, element); } } 

Se si inserisce dynamicmente un tag script, il codice verrà eseguito. NON UTILIZZARE EVAL. Le biblioteche lo sanno, non usano nemmeno la valutazione (a meno che non siano terribili).

questo funziona al 100% ….. ma preferirei non usare jquery

     AJAX Detection And Data Loading Using New School jQuery & HTML5: