web-dev-qa-db-fra.com

Remplacer la page HTML par le contenu récupéré via AJAX

J'ai une page HTML avec une structure typique:

<html>
  <head>
   <script src="..." ></script>
   <style>...</style>
  </head>
  <body>
   content
  </body>
  <script>
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT & STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  </script>
</html>

Pensez-vous que c'est possible? J'ai déjà essayé de donner un identifiant à la balise html et de faire $(id).replace(data); sans succès.

Ne me demandez pas pourquoi, mais c'est ce dont j'ai besoin (je travaille avec un site spécial "mashup builder" ... c'est une longue histoire).

EDIT : J'ai oublié de dire que les scripts dans le contenu reçu doivent être exécutés, même les scripts externes inclus en utilisant <script src="...">.

javascripthtmlajaxdom
63
Guido

essayez ceci avec jQuery :

$('body').load( url,[data],[callback] );

En savoir plus sur docs.jquery.com/Ajax/load

27
shfx

Le moyen le plus simple consiste à définir le nouveau contenu HTML en utilisant:

document.open();
document.write(newContent);
document.close();
133
niutech

Voici comment le faire dans Prototype : $(id).update(data)

Et jQuery : $('#id').replaceWith(data)

Mais document.getElementById(id).innerHTML=data devrait aussi fonctionner.

EDIT: Prototype et jQuery évaluent automatiquement les scripts pour vous.

11
geowa4

Tu pourrais essayer de faire

document.getElementById(id).innerHTML = ajax_response
7
The.Anti.9

le moyen le plus simple est

$("body").html(data);
5
LopesDaLeste

Ne pouvez-vous pas simplement essayer de remplacer le contenu du corps par le gestionnaire document.body?

si votre page est la suivante:

<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>

Utilisez simplement le document.body pour remplacer le corps.

Cela fonctionne pour moi. Tout le contenu de la balise BODY est remplacé par le innerHTML que vous spécifiez. Si vous devez même changer la balise html et tous les enfants, vous devez vérifier quelles balises du "document". sont capables de le faire.

Un exemple avec des scripts javascript à l'intérieur:

<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>

De cette façon, vous pouvez faire des scripts javascript dans le nouveau contenu. N'oubliez pas d'échapper à toutes les citations doubles et simples, sinon cela ne fonctionnera pas. échapper en javascript peut être fait en parcourant votre code et en mettant une barre oblique inverse devant toutes les guillemets simples et doubles.

Gardez à l'esprit que les scripts côté serveur comme php ne fonctionnent pas de cette façon. Étant donné que PHP est un script côté serveur, il doit être traité avant le chargement d'une page. Javascript est un langage qui fonctionne côté client et ne peut donc pas activer le retraitement du code php.

4
xaddict

Je suppose que vous utilisez jQuery ou quelque chose de similaire. Si vous utilisez jQuery, les éléments suivants devraient fonctionner:

<html>
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
   content
</body>
<script type="text/javascript">
   $("body").load(url);
</script>
</html>
4
Marius