Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 29/11/2016, à 18:32

Hizoka

Mettre à jour un texte html sans rafraîchir full compatible

Bonsoir,

je cherche un moyen pour mettre à jour quelques infos dans une page html5 sans la recharger completement.

Pour faire ça, j'ai fait le gros crado tongue

Une page hmtl5 avec un <object> qui affiche les infos que je veux.

<!DOCTYPE html>

<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head>

    <body id="IndexPage">
        <header>
            <p id="pBidon"></p>
            <object name="foo" type="text/html" data="header.html" width="810" height="40"></object>
        </header>

        <div id="DivCentral">
            <div id="DivDroite">
                <!-- Lecteur audio : autoplay -->
                <section id="AudioPlayer">
                    <audio controls autoplay>Impossible d'afficher le player</audio>
                </section>

                <!-- Informations sur la zic -->
                <section id="News">
                    <h2>News :</h2>
                </section>
            </div>
        </div>
    </body>
</html>

Dans la page des infos, j'ai mis un <meta http-equiv="refresh" content="10">

<!DOCTYPE html>

<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="refresh" content="10">
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div id="Infos">Bla bla bla</div>
    </body>
</html>

Et pour finir j'utilise un script python qui recrée régulierement ma page d'info:

#! /bin/python3
from urllib.request import urlopen
from time import sleep, strftime
from pathlib import Path # Nécessaire pour la recherche de fichier

while True:
    Duree = 30

    try:
        # Lecture de la page ligne par ligne
        for Ligne in urlopen("http://adresse-bidon.fr").read().decode('UTF-8').split("\n"):
            # Récupération des infos
            if 'class="SuperTest"' in Ligne:
                Infos = Ligne.replace("</td>", "").replace('<td class="SuperTest">', '').split(" | ")
    except:
        pass

    # Ecriture d'un nouveau fichier contenant les infos à afficher
    with open("header.html", "w") as HeaderFile:
        HeaderFile.write('<!DOCTYPE html>\n\n')
        HeaderFile.write('<html lang="fr">\n')
        HeaderFile.write('    <head>\n')
        HeaderFile.write('        <meta charset="utf-8" />\n\n')
        HeaderFile.write('        <meta http-equiv="refresh" content="{}">\n\n'.format(Duree))
        HeaderFile.write('        <link rel="stylesheet" href="style.css" />\n')
        HeaderFile.write('    </head>\n\n')
        HeaderFile.write('    <body>\n')
        HeaderFile.write('        <div id="Infos">{} - {}</div>\n'.format(Infos[0], Infos[1]))
        HeaderFile.write('    </body>\n')
        HeaderFile.write('</html>\n')

    sleep(10)

Alors globalement ça fonctionne mais ça fait vraiment Mac Giver...

En cherchant un peu partout, j'ai cru comprendre qu'il fallait passer par javascript mais je n'y arrive pas...

Je prends les conseils et les solutions smile

Merci à vous

EDIT : Je commence à me mettre à Django, mais il ne permet pas de faire ça non plus sans javascript.

Dernière modification par Hizoka (Le 18/01/2017, à 21:59)


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne

#2 Le 01/12/2016, à 02:42

Vobul

Re : Mettre à jour un texte html sans rafraîchir full compatible

Yop,

Il te faut :

1. jquery
2. faire une requête ajax pour choper le contenu à afficher
3. remplacer le html du contenu par ce que tu viens de chercher
4. mettre tout ça dans un truc qui relance toutes les 10 secondes

Il y a plein d'autres façons de faire. Tu peux aussi utiliser php pour lire ta page (include), et juste rafraîchir la page régulièrement, ça fonctionne aussi.


Vobul
Utilisez le retour utilisable de commandes !!!
J'aime la langue française, mais je parle franglais, deal with it.
RTFM

Hors ligne

#3 Le 01/12/2016, à 08:20

Hizoka

Re : Mettre à jour un texte html sans rafraîchir full compatible

Salut,

arf, je ne connais ni jquery ni ajax...

avec php, je peux recuperer les infos ou ça ne fait que remplacer mon object html ?


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne

#4 Le 01/12/2016, à 11:04

soshy

Re : Mettre à jour un texte html sans rafraîchir full compatible

Effectivement... Ta solution est... speciale... originale... artisanale... smile

le PHP pur, c'est fait pour generer une page complete. Tu peux decouper ta page en plusieurs morceaux et dire que t'as qu'un bout de ta page qui change, mais a chaque fois le navigateur demande un page complete. C'est uniquement dans le source PHP que ca simplifie les choses.

Pour ce que tu veux faire tu vas devoir faire du javascript (et utiliser jquery) et un serveur web avec un peu de code qui va avec (PHP/Java avec tomcat ou autre/nodeJS ...)
Donc la vraie solution, tu commences par importer un lib qui fait des truc pour toi: jquery (c'est bien pratique pour l'etape interoger le serveur, et aussi modifier le dom je crois).
Ce qu'il va se passer:
- Ton serveur aura une page index.html dans laquelle tu auras ton javascript.
- Cote serveur, en admettant que tu choisisses PHP, aura une page disons data.php qui lorsque tu l'ouvres avec ton navigateur, ne contiendra que les donnees a changer dans ta page principale.
- Dans le navigateur, sur ta page index.html, javascript avec l'aide de jquery va aller interoger une 2eme url (get sur /data.php).
- maintenant que javascript a recu les nouvelles donnees a afficher, il faut manipuler le DOM afin de remplacer le contenu de ta balise object.

Edit:
Etant donne que les informations qui t'interessent viennent d'un autre site tu peux te passer de la partie "serveur". Ce qui donnerait:
- Un seul fichier html a ouvrir dans un navigateur contenant le code javascript qui fait le boulot.
- Dans le navigateur, le JS (toujours avec jquery pour simplifier les choses) va chercher la page comme tu fais actuellement en python. Tu process le resultat pour ne garder que ce qui t'interesse comme actuellement (mais en javascript du coup!).
- Puis tu modifies le DOM avec juste ce dont tu as besoin qui doit etre le resultat de l'etape precedente.

Dernière modification par soshy (Le 01/12/2016, à 12:52)

Hors ligne

#5 Le 01/12/2016, à 14:10

soshy

Re : Mettre à jour un texte html sans rafraîchir full compatible

tiens, tu as meme droit a un petit exemple tout bete smile

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script>

      function update() {
        let url = 'http://cors.io/?http://developerexcuses.com/';
        $.ajax({
          url: url,
          success: function(res) { 
            processResult(res) 
          }
        });
        
        function processResult(res) {
          // la soupe pour recuperer les info qui nous interessent
          let quote = res.replace(/(?:\r\n|\r|\n)/g, ' ');
          quote = quote.match(/<a .*>(.*)<\/a>/)
          if (quote) {
            // la soupe pour mettre a jour le DOM
            let object = document.getElementsByTagName("object");
            object[0].firstChild.data = quote[1];
          }
        }
      }
    </script>
  </head>
  <body>
    <object>my initial content</object>
    <button onclick="update()"> update me </button>
  </body>
</html>

Dernière modification par soshy (Le 01/12/2016, à 14:15)

Hors ligne

#6 Le 01/12/2016, à 19:27

Hizoka

Re : Mettre à jour un texte html sans rafraîchir full compatible

Merci beaucoup soshy, j'imaginais un truc équivalent à ce que tu m'as proposé dans ton édit smile

Va falloir bosser un peu la soupe, mais une question est il possible qu'il se mette à jour tout seul sans action de la part du lecteur ?

PS : on fait comme on peut avec ce qu'on connaît tongue (dans mon cas bash et python)

EDIT : Il semble que j'arrive à accéder à ce que je veux au niveau texte smile

Dernière modification par Hizoka (Le 01/12/2016, à 19:54)


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne

#7 Le 01/12/2016, à 23:59

soshy

Re : Mettre à jour un texte html sans rafraîchir full compatible

Oui bien sûr !
Au choix :

<html>
  <head>
    <script>
      function myUpdate() {
        console.log("hello");
      }

      function init() {
        setInterval(myUpdate, 1000);
      }
      
    </script>
  </head>
  <body onload="init()">
  </body>
</html>
<html>
  <head>
    <script>
      function myUpdate() {
        console.log("hello");
      }

      function loop() {
        myUpdate();
        setTimeout(loop, 1000);
      }
      
    </script>
  </head>
  <body onload="loop()">
  </body>
</html>

les deux sont à peu près équivalent, sauf si ton code est lent a exécuter et que tu veux un interval court (par rapport à la durée d'exécution)

Dernière modification par soshy (Le 02/12/2016, à 00:27)

Hors ligne

#8 Le 06/12/2016, à 16:46

Hizoka

Re : Mettre à jour un texte html sans rafraîchir full compatible

Salut,

merci pour ton aide, j'ai fais des tests :
- Reccup d'infos via site externe : très hasardeux pour la recup avec cors.io/
- Reccup d'infos via un fichier texte : marche bien à priori

Mais je voudrais reccup les infos depuis :
http://localhost:XXXX

mais il ne veut pas, il dit que le serveur à répondu introuvable.

y a-t-il une façon de faire ?

encore merci !


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne

#9 Le 07/12/2016, à 10:36

soshy

Re : Mettre à jour un texte html sans rafraîchir full compatible

cors.io c'etait plus pour l'exemple qu'autre chose. Le truc, c'est que le navigateur (pour raison de securite) ne va pas te laisser faire des requetes (get post etc.) javascript sur un domaine different du domaine courant, SAUF si le site en question a la bonte de rajouter des headers HTTP specifique (les CORS justement). cors.io tout ce qu'il fait c'est agir comme un proxy qui rajoute les bon headers afin de pas etre emmerde.

Du coup, tu as 4 options:
- Faire ton propre proxy CORS comme cors.io fait. La partie serveur qu'on a ignoree devient donc indispensable et sert uniquement a rajouter les bon headers HTTP
- Configurer ton serveur local de facon a activer les CORS
- Mettre ton fichier html sur ton serveur local et au lieu d'ouvrir le fichier tu ouvres http://localhost:port/mon_fichier.html . Le domaine sera le meme donc tu devrais pas avoir de probleme de CORS.
- Demarrer le navigateur avec les options secretes pour developpeurs afin d'ignorer la securite sur les CORS. Je sais que c'est possible avec Chrome.

Dernière modification par soshy (Le 07/12/2016, à 10:39)

Hors ligne

#10 Le 07/12/2016, à 22:45

Hizoka

Re : Mettre à jour un texte html sans rafraîchir full compatible

Merci pour ces explications, je pense que je vais faire en sorte de me débrouiller via des commandes scp automatiques pour envoyer des fichiers sur le serveur qui seront lus en direct.

Merci beaucoup pour ton aide !


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne

#11 Le 14/01/2017, à 12:07

Hizoka

Re : Mettre à jour un texte html sans rafraîchir full compatible

Bonjour je me permets de relancer le sujet car je rencontre un souci qui semble être d'incompatibilité avec Safari.

Alors je n'ai pas de matos Apple (beurk) donc impossible de tester de mon côté...

Voici mon code :

<!DOCTYPE html>

<html lang="fr">
    <head>
        <meta charset="utf-8" />
    </head>

    <body id="IndexPage" onload="setInterval(InfoUpdate, 5000);">
        <script src="https://code.jquery.com/jquery-1.1.js" type="text/javascript"></script>
        <script>
            function InfoUpdate() {
                // Utilisation d'Ajax
                $.ajax({
                    url: 'meta.txt', // Fichier à ouvrir

                    success: function(res) {
                        console.log("Valeur :", res);
                        let textObject = document.getElementById("Infos");
                        textObject.innerHTML = res;
                    }
                })
            }

        </script>

        <p id="Infos">Ce texte est censé évoluer...</p>
    </body>
</html>

Il fonctionne très bien sous Linux, Windows, Android avec en autre les softs : Firefox, Chrome, Opéra.
Mais il semble que sous Apple, il ne se passe rien...

J'ai testé avec jquery-1.1.js pour voir mais il ne semble pas y avoir de changement...

Une idée ?

PS : Pour tester en vrai le site : http://test.hizo.fr/

EDIT : Il semble que ce soit plus compliqué que cela en fait...
Car j'ai pu tester sur un vieux apple et ça fonctionnait, par contre sur un autre malgré des tests sur safari, firefox et chrome, cela ne passait pas...
Y aurait il une configuration dans le téléphone...

EDIT 2 : J'ai pu faire des tests vite fait et le problème vient d'ajax, on voit que ça tourne... même avec un code très simple.
Les tests sont négatifs avec ios9.3.5

Dernière modification par Hizoka (Le 18/01/2017, à 22:31)


KDE Neon 64bits
Tous mes softs (MKVExtractorQt, HizoSelect, HizoProgress, Qtesseract, Keneric, Services menus...) sont sur github

Hors ligne