Il existe un div appelé "Contenu":
<div id="content"></div>Il doit être rempli avec les données d'un fichier PHP, par AJAX, y compris une <script>balise. Cependant, le script à l'intérieur de cette balise n'est pas en cours d'exécution.
<div id="content"><!-- After AJAX loads the stuff that goes here -->
<script type="text/javascript">
//code
</script>
<!-- More stuff that DOES work here -->
</div>window.onloadavoir créé un XMTHttpRequestobjet pour demander une autre page (php) contenant le contenu du div, y compris un script. Je fais cela avec JS ordinaire, pas de bibliothèques (autre que la mienne lol)
Réponses:
Le JavaScript inséré en tant que texte DOM ne s'exécutera pas. Cependant, vous pouvez utiliser le modèle de script dynamique pour atteindre votre objectif. L'idée de base est de déplacer le script que vous souhaitez exécuter dans un fichier externe et de créer une balise de script lorsque vous obtenez votre réponse Ajax. Vous définissez ensuite l' srcattribut de votre balise de script et voilà, il charge et exécute le script externe.
Cet autre article de StackOverflow peut également vous être utile: les scripts peuvent-ils être insérés avec innerHTML? .
$('#audit-view script').each(function (index, element) { eval(element.innerHTML); })
J'ai utilisé ce code, il fonctionne bien
var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML)//run script inside divSi vous chargez un bloc de script dans votre div via Ajax comme ceci:
<div id="content">
<script type="text/javascript">
function myFunction() {
//do something
}
myFunction();
</script>
</div>... il met simplement à jour le DOM de votre page, myFunction () n'est pas forcément appelé.
Vous pouvez utiliser une méthode de rappel Ajax telle que celle de jQuery méthode ajax () pour définir ce qu'il faut exécuter lorsque la requête se termine.
Ce que vous faites est différent du chargement d'une page avec JavaScript inclus dès le départ (qui est exécuté).
Un exemple d'utilisation du rappel de succès et du rappel d'erreur après avoir récupéré du contenu:
$.ajax({
type: 'GET',
url: 'response.php',
timeout: 2000,
success: function(data) {
$("#content").html(data);
myFunction();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error retrieving content");
}Un autre moyen rapide et sale est d'utiliser eval () pour exécuter tout code de script que vous avez inséré en tant que texte DOM si vous ne souhaitez pas utiliser jQuery ou une autre bibliothèque.
Voici le script qui évaluera toutes les balises de script dans le texte.
function evalJSFromHtml(html) {
var newElement = document.createElement('div');
newElement.innerHTML = html;
var scripts = newElement.getElementsByTagName("script");
for (var i = 0; i < scripts.length; ++i) {
var script = scripts[i];
eval(script.innerHTML);
}
}Appelez simplement cette fonction après avoir reçu votre code HTML du serveur. Soyez averti: utilisationeval peut être dangereuse.
Cela `` fonctionne '' pour moi en utilisant jQuery, à condition que vous n'essayiez pas d'ajouter un sous-ensemble du HTML renvoyé par XHR au document. (Voir ce rapport de bogue montrant le problème avec jQuery.)
Voici un exemple montrant que cela fonctionne:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test_1.4</title>
<script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script>
<script type="text/javascript" charset="utf-8">
var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
"$('#a').html('Hooray! JS ran!');" +
"<\/script><\/div>";
$(function(){
$('#replaceable').replaceWith($(snippet));
});
</script>
</head>
<body>
<div id="replaceable">I'm going away.</div>
</body>
</html>Voici l'équivalent de ce qui précède: http://jsfiddle.net/2CTLH/
Voici une fonction que vous pouvez utiliser pour analyser les réponses AJAX, en particulier si vous utilisez minifiedjs et que vous voulez qu'il exécute le Javascript retourné ou que vous voulez simplement analyser les scripts sans les ajouter au DOM, il gère également les erreurs d'exception. J'ai utilisé ce code dans la bibliothèque php4sack et il est utile en dehors de la bibliothèque.
function parseScript(_source) {
var source = _source;
var scripts = new Array();
// Strip out tags
while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
var s = source.toLowerCase().indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.toLowerCase().indexOf("</script", s);
var e_e = source.indexOf(">", e);
// Add to scripts array
scripts.push(source.substring(s_e+1, e));
// Strip from source
source = source.substring(0, s) + source.substring(e_e+1);
}
// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
if (scripts[i] != '')
{
try { //IE
execScript(scripts[i]);
}
catch(ex) //Firefox
{
window.eval(scripts[i]);
}
}
}
catch(e) {
// do what you want here when a script fails
// window.alert('Script failed to run - '+scripts[i]);
if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]);
}
}
// Return the cleaned source
return source;
}Si vous injectez quelque chose qui nécessite la balise de script, vous pouvez obtenir une erreur de syntaxe non interceptée et dire un jeton illégal . Pour éviter cela, veillez à éviter les barres obliques dans votre ou vos balises de script de fermeture. c'est à dire;
var output += '<\/script>';Il en va de même pour toutes les balises de fermeture, telles qu'une balise de formulaire.
J'ai eu un message similaire ici, charge addEventListener sur la charge ajax SANS jquery
La façon dont je l'ai résolu a consisté à insérer des appels à des fonctions dans ma fonction stateChange. La page que j'avais configurée était 3 boutons qui chargeraient 3 pages différentes dans contentArea. Parce que je devais savoir quel bouton était enfoncé pour charger la page 1, 2 ou 3, je pourrais facilement utiliser des instructions if / else pour déterminer quelle page est chargée et ensuite quelle fonction exécuter. Ce que j'essayais de faire était d'enregistrer différents écouteurs de boutons qui ne fonctionneraient que lorsque la page spécifique était chargée à cause des ID d'élément.
alors...
si (page1 est en cours de chargement, pageload = 1) exécuter la fonction registerListeners1
puis la même chose pour la page 2 ou 3.
Cela a fonctionné pour moi en appelant eval sur chaque contenu de script depuis ajax .done:
$.ajax({}).done(function (data) {
$('div#content script').each(function (index, element) { eval(element.innerHTML);
}) Remarque: je n'ai pas écrit de paramètres dans $ .ajax que vous devez ajuster en fonction de votre ajax.
Ma conclusion est que HTML n'autorise pas les balises NESTED SCRIPT. Si vous utilisez javascript pour injecter du code HTML contenant des balises de script, cela ne fonctionnera pas car le javascript entre également dans une balise de script. Vous pouvez le tester avec le code suivant et vous serez convaincu que cela ne fonctionnera pas. Le cas d'utilisation est que vous appelez un service avec AJAX ou similaire, vous obtenez du HTML et vous souhaitez l'injecter directement dans le DOM HTML. Si le code HTML injecté contient des balises SCRIPT, cela ne fonctionnera pas.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body></body><script>document.getElementsByTagName("body")[0].innerHTML = "<script>console.log('hi there')</script>\n<div>hello world</div>\n"</script></html>Une autre chose à faire est de charger la page avec un script tel que:
<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
//do something
}
myFunction();
</script>
</div>Cela chargera la page, puis exécutera le script et supprimera le gestionnaire d'événements une fois la fonction exécutée. Cela ne fonctionnera pas immédiatement après un chargement ajax, mais si vous attendez que l'utilisateur entre l'élément div, cela fonctionnera très bien.
PS. Nécessite Jquery