IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Afficher et copier contenu d'une page html


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2011
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 13
    Points : 7
    Points
    7
    Par défaut Afficher et copier contenu d'une page html
    Bonjour bonjour,
    Je suis entrain de rajouter quelques options sur mon site web dont celle de copier directement le code source d'un page html simplement en cliquant sur un lien.

    J'utilse donc zclip et la fonction .load() pour faire tout ça et ça fonctionne à moitié bien.

    En effet j'aurai besoin de récupérer également les balises html de ma page web mais celle-ci ne s'affiche pas et je n'arrive pas à comprendre pourquoi.
    J'ai juste vu que si j'affiche ma page dans un textarea les balises <html> <head> etc s'affiche mais pas si j'affiche dans une div.

    Merci

    Voici mon code :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>load demo</title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript" src="_js/clipboard/jquery.zclip.js"></script>
      <script>
     $(document).ready(function(){$('a#copy-dynamic').zclip({path:'_js/clipboard/ZeroClipboard.swf', copy:function(){return $('div#dynamic').html();}});});
      </script>
    </head>
    <body>
    <a href="#" id="copy-dynamic">Click here to copy the value of this input:</a>
    <div id="dynamic"></div>
    <div id="error"></div>
    <script>
    $( "#dynamic" ).load("/564/548975c48b18c.html");
    </script>
    </body>
    </html>


    et le code de ma page html à charger


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style='background-color: #F3F3F3'>
    <p>&nbsp;</p>
    <p style="text-align: center; color: #25262d; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 50px;">salut toi <a href="salut.html">clic ici</a></p>
    <p><img src="_images/hello.png" alt="hello" />&nbsp;</p>
    </body>
    </html>

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Ben c'est normal... si tu mets du code HTML dans une div, les balises sont interprétées... à la rigueur, tu peux remplace les chevrons ouvrants (<) par des entités HTML (&lt;) et l'idéal serait d'insérer le code dans une balise <pre> plutôt que <div>.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2011
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 13
    Points : 7
    Points
    7
    Par défaut
    Bonjour Bovino,
    Merci pour ta réponse au moins déjà j'en sais un peu plus sur mon problème d'affichage dans la div.
    Par contre même avec le <pre></pre> ça ne fonctionne pas

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    remplace les chevrons ouvrants (<) par des entités HTML (&lt;)
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 636
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 636
    Points : 66 655
    Points
    66 655
    Billets dans le blog
    1
    Par défaut
    Autrefois ^^ on pouvait utilser la balise XMP ...
    Mais elle n'existe plus ..
    Et j'avoue également que la balise pre ne fait pas le taff

    Voici une astuce que j'ai trouvée sur le net !

    un class:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .pre {
      display: block;
    }
    et une balise script ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script type="text/plain" class="pre" >
    <i>&eacute;</i>
    </script>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2011
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 13
    Points : 7
    Points
    7
    Par défaut
    Bonjour Spacefrog,
    Je suis désolé mais je n'ai pas compris le principe de ton code.
    COmment il fonctionne? je n'arrive pas à le mettre en place.


    Merci

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Exemple :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    #btnGo { margin: 24px; }
    #input, #output { display:block; margin: 24px; width: 80%; height: 200px; border: 1px solid grey; overflow: scroll; }

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <h3>Postable</h3>
    <h5>Input</h5>
    <textarea id="input"></textarea>
    <button id="btnGo">Convertir</button>
    <h5>Output</h5>
    <textarea id="output"></textarea>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $( function(){ // forme abrégée de $(document).ready(function(){
     
        function escape( value ){
            return value.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/\"/g, '&quot;')
                .replace(/\'/g, '&#39;');
        }
     
        $( "#btnGo" ).on( "click", function(){
            $( "#output" ).val( "<pre><code>" + escape( $( "#input" ).val() ) + "</code></pre>" );
        });
     
        $( "textarea" ).val( "" );
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2011
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 13
    Points : 7
    Points
    7
    Par défaut
    Merci pour vos réponse.
    J'ai fait les tests avec vos propositions mais vous me proposez de convertir mon code.
    Or je souhaite simplement récupère le code html d'un fichier, le copier dans le presse papier pour qu'ensuite la personne puisse aller copier le code ailleurs.

    Mais si je remplace les chevrons mon code ne fonctionne plus.

    Merci

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Il faut insérer le code converti dans votre page web. L'utilisateur qui visitera votre page pourra le copier-coller, et il fonctionnera.

    Faites un test. Exemple

    Essayer de copier-coller les exemples de code, puis examiner le code source de cette page.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 636
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 636
    Points : 66 655
    Points
    66 655
    Billets dans le blog
    1
    Par défaut
    la balse script en text/plain et display block est tout de même beaucoup plus simple ... mais on perd la mise en forme et es retours lignes

    du coup l'idée de Daniel est intéressante de passer par un textarea

    Il me semble que l'on peut se passer des replaces

    http://fiddle.jshell.net/s01sL165/

    et en y intégrant une hauteur calculée selon le nombre de lignes
    http://fiddle.jshell.net/s01sL165/1/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. [MySQL] Afficher le contenu d'une page HTML via du PHP
    Par loic20h28 dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 02/01/2012, 14h34
  2. Réponses: 2
    Dernier message: 20/08/2009, 12h12
  3. Afficher le contenu d'une page html
    Par megamax dans le forum Intégration
    Réponses: 0
    Dernier message: 26/07/2009, 18h22
  4. Récupérer contenu d'une page HTML
    Par ArHacKnIdE dans le forum Langage
    Réponses: 9
    Dernier message: 07/11/2006, 09h56
  5. Réponses: 5
    Dernier message: 30/11/2005, 10h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo