Problème de previewing avec Javascript/Ajax

Marsh Posté le 05-07-2007 à 03:22:24

Bonjour,

Je travaille actuellement sur Javascript et Ajax, et une des fonctions consiste à afficher un aperçu d'une page html, jpg, ou encore swf, dans un <div> prévu à cet effet.
notre première fonction javascript de previewing correspondait à ça :

Code :

function showpreview(url) {
document.getElementById("div_cible" ).style.visibility = "";
document.getElementById("iframe_dans_la_div_cible" ).style.visibility = "";
document.getElementById("iframe_dans_la_div_cible" ).src = url;
}

Cette fonction fonctionne très bien mais provoque un chargement dans la page.
Afin d'éviter de montrer le chargement de la page dans IE et Firefox, Nous utilisons une autre fonction qui utilise la méthode xmlHttp.

La fonction javascript correspond à ça :

Code :

function showpreview(url)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request" )
return
}
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete" )
{
document.getElementById("div_cible" ).innerHTML=xmlHttp.responseText
}
}

L'ennui est que après avoir testé cette fonction, on s'est rendu compte qu'apparement elle ne lirait pas les attributs de balise html.
Après quelques tests, nous avons trouvé des résultats plus que curieux :
d'après le code source de la page (merci firebug) on observe que la page html complète, avec tous les appels de fichiers, et toutes les balises, est bien insérée dans le div.
Mais d'après le display sur l'écran : le javascript ne marche pas, le Css ne marche pas, les attributs de balise ne marchent pas tous. Exemple dans la balise body :

Code :

<body bgcolor="#FF00FF"><p>bla bla<p></body>

l'attribut color ne marche pas. Si on ouvre la page dans une nouvelle fenêtre, les balises fonctionnent, et on obtient une magnifique couleur violette.
Je suppose que le problème viendrait du fait que la div_cible n'est pas une balise <iframe> ...
Le problème est que que si on teste la fonction en utilisant comme cible d'affichage le <iframe> ca donne rien et au niveau code ca donne ca dans firebug :

Code :

iframe id="iframe_dans_la_div_cible" width="100%" height="100%" frameborder="0" style="visibility: hidden;">
<html>
<head>
<title/>
</head>
<body/>
</html>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Titre de la page</title>
<script type="text/javascript" src="bin/prototype.js">
</script> <script type="text/javascript" src="bin/test.js"> </script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="element1"><p>zone cliquable pour test javascript</p></div>
<div id="container">résultat test javascript ici</div>
</body>
</html>
</iframe>

Comme on peut le voir, on a deux fichiers html qui se créent dans le iframe... ce qui est ... génant. Et qui a mon avis bloque le résultat.

Bref ma question est courte : Quelqu'un aurait il une idée pour résoudre mon problème de ma fonction javascript, tout en évitant des chargements dans la page.

Merci d'avance.

Nico.

---------------
I'll feed your skin snacks to my cockatiel!

Reply

Marsh Posté le 05-07-2007 à 03:22:24

Reply

Marsh Posté le 05-07-2007 à 08:03:36

le iframe c'est juste fait pour foutre une page HTML pas du code HTML.
et c'est un peu normal que tout ce qui est styles et autres conneries présentent dans le head ne soit pas lu.
Le seul moyen reste une iframe [:spamafote]