Aller au contenu

Rafraichir dynamiquement unre iframe dans une page html

Kori

Par Kori
dans Programmation et Lignes de code

Messages recommandés

Kori Étoile Montante

Kori

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
seboss666 Expérimenté

seboss666

Posté(e)
Posté(e)

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...)

Lien vers le commentaire
Partager sur d’autres sites
Kori Étoile Montante

Kori

Posté(e)
  • Auteur
Posté(e)

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)

Lien vers le commentaire
Partager sur d’autres sites
seboss666 Expérimenté

seboss666

Posté(e)
Posté(e)
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à).

Lien vers le commentaire
Partager sur d’autres sites
Kori Étoile Montante

Kori

Posté(e)
  • Auteur
Posté(e)

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 ;)

Lien vers le commentaire
Partager sur d’autres sites
seboss666 Expérimenté

seboss666

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...