Jump to content

Rafraichir dynamiquement unre iframe dans une page html


Recommended Posts

Plop les codeurs,

Alors déjà mon site c'est par là : http://osef-team.net.

Je suis en cours de modifs ça avance pas mal, mais je bloque sur un truc.

Sur la page d'accueil il y a un bloc avec l'affichage d'un serveur teamspeak.

Je voudrais que ce bloc se rafraichisse automatiquement, mais que lui et pas la page complète (ça j'ai réussit à faire :ane: )

J'ai fouillé partout sur le net, rien ne semble fonctionner chez moi.

JS est déjà utilisé ailleurs donc de ce côté pas de soucis.

Ce que j'ai fait :

J'ai créé une page ts3.html afin de simplifier les manip, sur un site de test pas celui linké ci-dessus. dont voici le contenu :

<head><script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.9.1.min.js"></script><script type="text/javascript">function reloadiframe(delai){window.frames['toto'].location.reload();setTimeout("reloadiframe(10)",delai*1000);</script></head><body onload="reloadiframe(10)"><iframe name="toto" allowtransparency="true" src="http://37.59.64.82/ts3/tsviewpub.php?skey=0&sid=1&showicons=right&bgcolor=ffffff&fontcolor=000000" height="320" width="100%" scrolling="auto" frameborder="0">Your Browser will not show Iframes</iframe></body>

Je l'insère donc dans une div avec la fonction : <!-- INCLUDE ts3.html -->

Alors précision si je commence à pas trop mal me débrouiller en HTML/CSS, le JS est du chinois pour moi.

Ce code est donc le dernier en date que j'ai testé, il y en a eu d'autre. Mais le seul qui a daigné fonctionner me faisait un refresh de toute la page. C'est déjà chiant à la base mais imaginez avec une shoutbox en plus :francais:

Bref je suis ouvert à toute idée permettant de me faire avancer sur ce point.

Link to comment
Share on other sites

D'après ce que je sais de Javascript, y'a déjà pas mal d'erreurs aussi bien dans la définition de la fonction que dans son appel. Je vais même pas essayer de le corriger. Pourquoi ?

Parce que pour moi, la méthode la plus propre serait je pense de ne pas chercher à recharger l'iframe depuis la page principale en javascript, mais plutôt à se servir d'HTML directement sur le tsviewpub.php (a ajouter avec les autres balises meta) :

<head>(...)<meta http-equiv="refresh" content="10">(...)</head>

10 étant la valeur en seconde d'attente entre chaque refresh.

Attention : pas testé, donc dans un iframe je sais pas dans quelle mesure ça fonctionnera (la direction décline toute responsabilité toussa...)

Link to comment
Share on other sites

Parce que pour moi, la méthode la plus propre serait je pense de ne pas chercher à recharger l'iframe depuis la page principale en javascript, mais plutôt à se servir d'HTML directement sur le tsviewpub.php (a ajouter avec les autres balises meta) :

<head>(...)
<meta http-equiv="refresh" content="10">
(...)
</head>

S'pas idiot ça, je vais voir pour cette solution. Le serveur TS étant chez un pote, je pourrais lui demander de m'envoyer le fichier pour modif.

Je test dès que je peux et je vous tiens au jus

Merci ;)

Petit aparté JS a pas l'air si mal que ça, j'ai récupéré un code pour un spoiler que je puisse améliorer en css. Donc bon je crache pas dessus non plus hein, et comme je ne trouvais pas de réponse à mon problème. J'ai comme d'hab testé tout ce j'ai trouvé ( y compris sur alsacreation)

Link to comment
Share on other sites

Petit aparté JS a pas l'air si mal que ça, j'ai récupéré un code pour un spoiler que je puisse améliorer en css. Donc bon je crache pas dessus non plus hein, et comme je ne trouvais pas de réponse à mon problème. J'ai comme d'hab testé tout ce j'ai trouvé ( y compris sur alsacreation)

Je disais juste qu'il est très facile de se compliquer la vie avec du Javascript quand HTML/CSS savent déjà gérer les choses simplement, pas forcément que Javascript est compliqué (il n'est pas forcément facile d'accès, mais il est plutôt lisible, ce qui aide déjà).

Link to comment
Share on other sites

Oui c'est sûr que la syntaxe n'a pas l'air aussi compliquée que ça. Mais bon je vais déjà prendre un peu mieux en main le html et le css, après on verra. Quand je vois le nombre de sites qui utilisent des balises dépréciées.

Et pour bien faire il faudrait aussi que je passe au php... Chaque chose en son temps ;)

Link to comment
Share on other sites

Ou de vieilles conventions d'écritures. J'ai retrouvé un script pour afficher des photos de weekends entre pote, j'avais pondu ça à l'arrache en copiant/collant un bout de javascript que je maitrisais même pas. C'est dégueulasse au possible (genres balises html en MAJUSCULE !). Oh puis allez tiens pour la gloire de l'horreur :

<HEAD>
<TITLE>Week-end T-OC/RIP</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

//3-way slideshow- by Suzanne Arnold (http://jandr.com/, suzanne@mail.jandr.com)
//Script featured on JavaScript Kit (http://javascriptkit.com)
//Credit must stay intact

var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
   }
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;
   }
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop") ? "Start" : "Stop";
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == "Stop") {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout("Onerotate()", Onerotate_delay);
}
}

//  End -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<TABLE border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD>
      <form name="Oneslideform" >
        <DIV align="center">
          <TABLE width="*" border="1" cellspacing="0" cellpadding="4" bordercolor="#2E2E2E">
            <TR>
              <TD bgcolor="#2E2E2E">
                <DIV align="center"><B><FONT color="#FFFFFF">Photos 10 Juillet 2010</FONT></B></DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#FFFFFF">

<?php
           $photos=scandir('./photos');

           echo '<DIV align="center"><IMG src="photos/'.$photos[2].'" width="*" height="480" name="Oneshow" border="0"></DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#2E2E2E">
                <DIV align="center">
                  <SELECT name="Oneslide" onChange="Onechange();">
                    ';
           $compteur=1;
           foreach ($photos as $image) {
            if (($image != '.') AND ($image !='..')) {
            echo '<OPTION value="photos/'.$image.'">Photo 0'.$compteur++.'</OPTION>';
            }
          }
?>

                 </SELECT>
      </DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#2E2E2E">
                <DIV align="center">
                  <INPUT type=button onClick="Oneprevious();" value="<<" title="Previous">
                  <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start" title="AutoPlay">
                  <INPUT type=button onClick="Onenext();" value=">>" title="Next">
          </DIV>
              </TD>
            </TR>
          </TABLE>
        </DIV>
      </form>
    </TD>
  </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

J'ai fait ça sans être à jour, ça devait faire au moins 4/5 ans que j'avais pas fait d'HTML/CSS/Javascript. J'ai un peu progressé depuis :D

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...