OVH Cloud OVH Cloud

Comment détecter le changement de doc dans un iframe

33 réponses
Avatar
Asterbing
Bonjour. J'ai posé un problème dans comp.lang.javascript mais n'aboutis
pas. Tout est dit dans le fichier HTML dont je copies le contenu ci-
dessous (désolé, c'est en anglais parce que prévu pour un ng anglais à
l'origine ; je peux traduire si utile). Vos lumières m'intéressent.

-- DEBUT DE COPIE --
<html>
<head>
<title>Check Statistics</title>
<script type="text/javascript" language="JavaScript"><!--
var f = document.getElementById("stats");

function WaitStats4Checking(){
if (f.document.readyState == "complete"){Check();}
else{setTimeout("WaitStats4Checking()",50);}}

function GetStats(){
var f = document.getElementById("stats");
f.setAttribute("src","/cgi-bin/getstats.exe");
WaitStats4Checking();}
//--></script>
</head>
<body>
<p>Initially, the iframe contains help.htm which just says "Not any
statistic loaded. Click 'Get Statistics'" for which a heigh of 20px is
enough.
<br><br>
When user click on the 'Get Statistics' link, the GetStats() javascript
function run the getstats.exe CGI script which returns a generated
document in iframe.
<br><br>
When this generated document is well loaded in iframe (not before), the
Check() javascript function should be launched.
<br><br>
Current problem is that (f.document.readyState == "complete") is always
true even if generated document is not fully loaded.
<br><br>
How to solve this ? Maybe going through onreadystatechange to launch
WaitStats4Checking() rather than at the end of GetStats(), but how ?</p>

<a href="#" onclick="GetStats();">Get Statistics</a>

<div style="position: absolute; visibility: visible; top: 300px; left:
15px; height: auto; width: 731px; padding: 5px; overflow: hidden;
background: white; color: #000000">
<iframe id="stats" width=720 height=20 src="help.htm" frameborder="yes"
scrolling="no"></iframe>
</div>
</body></html>
-- FIN DE COPIE --

Merci par avance :)

10 réponses

1 2 3 4
Avatar
ASM
Bonjour. J'ai posé un problème dans comp.lang.javascript mais n'aboutis
pas. Tout est dit dans le fichier HTML dont je copies le contenu ci-
dessous (désolé, c'est en anglais parce que prévu pour un ng anglais à
l'origine ; je peux traduire si utile). Vos lumières m'intéressent.

function GetStats(){
var f = document.getElementById("stats");
f.setAttribute("src","/cgi-bin/getstats.exe");


f.location = "/cgi-bin/getstats.exe");

WaitStats4Checking();}
//--></script>



--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM
Bonjour. J'ai posé un problème dans comp.lang.javascript mais n'aboutis
pas. Tout est dit dans le fichier HTML dont je copies le contenu ci-
dessous (désolé, c'est en anglais parce que prévu pour un ng anglais à
l'origine ; je peux traduire si utile). Vos lumières m'intéressent.

-- DEBUT DE COPIE --
<html>
<head>
<title>Check Statistics</title>
<script type="text/javascript" language="JavaScript"><!--


onload = function () {
var f = document.getElementById("stats");
f.onload = function() { f.location = "/cgi-bin/getstats.exe";}
}

</script>

ou directement :

<iframe id="stats" widthr0 height src="help.htm"
frameborder="yes" scrolling="no"
onload="this.location='/cgi-bin/getstats.exe';"></iframe>


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Asterbing
In article <44156df1$0$29211$,
says...
Bonjour. J'ai posé un problème dans comp.lang.javascript mais n'aboutis
pas. Tout est dit dans le fichier HTML dont je copies le contenu ci-
dessous (désolé, c'est en anglais parce que prévu pour un ng anglais à
l'origine ; je peux traduire si utile). Vos lumières m'intéressent.

function GetStats(){
var f = document.getElementById("stats");
f.setAttribute("src","/cgi-bin/getstats.exe");


f.location = "/cgi-bin/getstats.exe");

WaitStats4Checking();}
//--></script>






Merci, mais le problème n'est pas l'appelle à getstats.exe mais la
détection de la fin de chargement du document généré dans le iframe.
Sachant que readyState semble ne pas fonctionner


Avatar
Asterbing
In article <44156f4a$0$18312$,
says...
Bonjour. J'ai posé un problème dans comp.lang.javascript mais n'aboutis
pas. Tout est dit dans le fichier HTML dont je copies le contenu ci-
dessous (désolé, c'est en anglais parce que prévu pour un ng anglais à
l'origine ; je peux traduire si utile). Vos lumières m'intéressent.

-- DEBUT DE COPIE --
<html>
<head>
<title>Check Statistics</title>
<script type="text/javascript" language="JavaScript"><!--


onload = function () {
var f = document.getElementById("stats");
f.onload = function() { f.location = "/cgi-bin/getstats.exe";}
}

</script>

ou directement :

<iframe id="stats" widthr0 height src="help.htm"
frameborder="yes" scrolling="no"
onload="this.location='/cgi-bin/getstats.exe';"></iframe>





Merci, mais le problème n'est pas l'appelle à getstats.exe mais la
détection de la fin de chargement du document généré dans le iframe.
Sachant que readyState semble ne pas fonctionner


Avatar
Asterbing
In article ,
says...
function GetStats(){
var f = document.getElementById("stats");
f.setAttribute("src","/cgi-bin/getstats.exe");



Bon, ça à l'air de marcher en mettant un onload="Check();" sur le iframe
; plus de fonction d'attente de readyState donc. Le seul pb restant est
que Check se déclenche même au premier chargement (pas uniquement après
appel à getstats.exe), mais c'est un détail.

Bref, le pb restant est que je ne suis pas sûr que cet évènement onload
soit supporté par tous les navigateurs. Confirmez-vous ?

J'ai trouvé ce bout de code via google, afin d'ajouter le onload quand
il n'existe pas d'emblée. Qu'en pensez-vous ? :

if (window.addEventListener){
f.onload = Check();}
else if (f.attachEvent){
f.attachEvent("onload", Check());}
else{
return;}

Avatar
ASM
In article <44156f4a$0$18312$,
says...

<script type="text/javascript" language="JavaScript"><!--


onload = function () {
var f = document.getElementById("stats");
f.onload = function() { f.location = "/cgi-bin/getstats.exe";}
}

</script>

ou directement :

<iframe id="stats" widthr0 height src="help.htm"
frameborder="yes" scrolling="no"
onload="this.location='/cgi-bin/getstats.exe';"></iframe>


Merci, mais le problème n'est pas l'appelle à getstats.exe mais la
détection de la fin de chargement du document généré dans le iframe.
Sachant que readyState semble ne pas fonctionner


et à quoi sert le 'onload' dans l'iframe ?

quand la page indiquée dans le html est finie d'être chargée ça devrait
lancer l'*.exe dans cet iframe.

N'est-ce point ce que tu veux ?

voici ce que tu donnes comme code :

<script type="text/javascript" language="JavaScript"><!--
var f = document.getElementById("stats");

function WaitStats4Checking(){
if (f.document.readyState == "complete"){Check();}
else{setTimeout("WaitStats4Checking()",50);}}

function GetStats(){
var f = document.getElementById("stats");
f.setAttribute("src","/cgi-bin/getstats.exe");
WaitStats4Checking();}
//--></script>

à mon idée 'complete' est réservé aux images
et j'ai l'impression que ça veut seulement dire :
"oui le truc existe et je l'ai trouvé"
et non pas que son chargement est effectif.

il faut utiliser 'onload'
pour s'assurer du chargement de quoique ce soit.

dans ton code :
la fonction Check() on ne sait ce que c'est ...
elle n'est pas définie --> ça doit scratcher ton mécanisme.
de même on ne sait ce que fabrique cet *.exe

il y a des chances que cet *.exe se recharge à chaque fin
d'ouverture-affichage si onload dans l'iframe réclame ce fichier.
Prévoir un timer ? qu'on ait le temps d'en voir un bout ;-)


--
Stephane Moriaux et son [moins] vieux Mac



Avatar
ASM

J'ai trouvé ce bout de code via google, afin d'ajouter le onload quand
il n'existe pas d'emblée. Qu'en pensez-vous ? :

if (window.addEventListener){
f.onload = Check();}
else if (f.attachEvent){
f.attachEvent("onload", Check());}
else{
return;}


oui c'est du code joli et tout et moderne etoussa

mais ceci en vieux code devrait en faire autant :

onload = function () {
var f = document.getElementById("stats");
f.onload = function() { f.Check; };
}

reste à savoir ce qu'est ce Check() ? ?


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Laurent Vilday

mais ceci en vieux code devrait en faire autant :

onload = function () {
var f = document.getElementById("stats");
f.onload = function() { f.Check; };
}


Houla attention là.

f étant un objet DOM, la closure créée ici (en plus d'être une référence
circulaire) est pile poil le type de structure qui provoque des fuites
mémoires avec IE si on n'y prend pas garde.
http://blogs.msdn.com/ie/archive/2005/06/21/431376.aspx
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp

Ensuite attention aux (), f.Check; ca indique qu'on veut la référence
ici et donc ben c'est complètement en erreur puisque en réalité il
faudrait appeler la fonction. ==> f.Check();

En modèle traditionnel on a aucun problème avec la variable this et donc
on peut faire this.Check() (si on considère que Check() fait parti du
scope d'application de la iframe référencée par f)

onload = function()
{
var f = document.getElementById('stats');
f.onload = function(e) { this.Check(); };
};

Ceci dit, je crois qu'on s'éloigne du problème initial.

--
laurent

Avatar
Asterbing
In article <441578cb$0$19713$,
says...

et à quoi sert le 'onload' dans l'iframe ?

quand la page indiquée dans le html est finie d'être chargée ça devrait
lancer l'*.exe dans cet iframe.

N'est-ce point ce que tu veux ?



Oui, la piste onload semble la bonne. Sinon, non, je ne veut pas charger
le cgi à chaque onload (cela créerai d'ailleurs une boucle comme tu le
dit dans ton post), mais lancer check() après le chrgement de la page
générée par onload. Ainsi : onload="Check();" semble aller en dehors du
fait que ça n'est peut-être pas compatible tous navigateurs majeurs.

En fait, je n'avais pas pensé à ça parce que je pensais que ce onload ne
se déclenchait qu'une fois, à la création du iframe plutôt qu'au
chargement de chaque nouveau doc dedans.

Avatar
Laurent Vilday

à mon idée 'complete' est réservé aux images
et j'ai l'impression que ça veut seulement dire :
"oui le truc existe et je l'ai trouvé"
et non pas que son chargement est effectif.


Non non, point du tout. IE (qui est le seul à utiliser ce truc infâme du
readyState) affiche cette propriété sur plusieurs autres éléments qu'une
image : document, FRAME, IFRAME, IMG, INPUT (type button, checkbox,
file, hidden, image, password, radio,reset, submit, text), LINK, SCRIPT,
TABLE, TBODY, TD, TFOOT, TH, THEAD et pour finir par TR

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp

Maintenant, je vois assez moyennement comment on peut avoir cette
propriété sur un TD (entre autre), certainement en utilisant des trucs
bien propriétaires de IE donc inutilisables dans la réalité.

il faut utiliser 'onload'
pour s'assurer du chargement de quoique ce soit.


Sauf que avec IE il faut utiliser le onreadystatechange :(

--
laurent

1 2 3 4