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

JavaScript Discussion :

Javascript dans une iframe ?


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Inscrit en
    Mai 2008
    Messages
    317
    Détails du profil
    Informations forums :
    Inscription : Mai 2008
    Messages : 317
    Par défaut Javascript dans une iframe ?
    Bonjour à tous,

    Je fait en ce moment un petit script backend de gestion de news.
    J'essaye de créer un bloc contenant la preview du message posté.

    Le truc, c'est que pour être sur que le CSS de la preview (le css du front-office) n'interagisse pas avec le reste de la page en cours (backend), j'ai voulu placer le html de ma preview dans une iframe:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <iframe id='content-preview'>
        <link rel='stylesheet' href='{$url}css/style.css' type='text/css' media='all'>
        {$preview}
    </iframe>

    Jusque là, pas de problème.


    Le problème c'est que ma variable {$preview} (qui est un fetch smarty du template des articles du frontoffice) contient des scripts javascript (SyntaxHighlight entre autre).

    par exemple:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    {if $content->message|strstr:'[code'}
    	<script type='text/javascript' src='{$url}modules/syntaxhighlighter/scripts/shCore.js'></script>
    	<link type='text/css' rel='stylesheet' href='{$url}modules/syntaxhighlighter/styles/shCore.css'/>
    	<link type='text/css' rel='stylesheet' href='{$url}modules/syntaxhighlighter/styles/shThemeDefault.css'/>
    	<script type='text/javascript'>
                    SyntaxHighlighter.all();
            </script>
    {/if}

    Mais ce javascript n'est pas executable dans l'iframe apparement.

    Autant quand il s'agit d'une iframe cross-domaine (avec un src externe) je comprends le principe de ne pas exécuter le JS, question sécurité, mais quand c'est pour une iframe interne, c'est chiant
    C'est un peu comme si l'ajax ne fonctionnais ni en cross-domaine, ni sur notre propre domaine ^^'

    Bref, donc, je cherche un moyen d’exécuter ces fonctions javascript dans cette iframe, une piste ?

    Alternativement, je cherche une autre solution,
    mais j'ai abandonné l'idée d'une popup (puisque presque tout les navigateurs les bloques maintenant), mais sinon, je suis preneur d'une autre solution si vous avez = )

  2. #2
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Par défaut
    Bonjour.

    Mais ce javascript n'est pas executable dans l'iframe apparement.
    Dans votre Iframe vous pouvez appeler une fonction appartenant à son parent, en utilisant "parent" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    parent.fonction_de_page-mere() ;
    Vous pouvez même utiliser ou modifier des variables JS appartenant à la page mère.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    parent.variable_js = "nouvelle_valeur" ;
    Cdlt

  3. #3
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    L'iframe c'était une bonne idée, effectivement ça évite les « débordements » de CSS. Par contre, tu n'as pas bien saisi la façon dont ça fonctionne : une iframe a un attribut src qui pointe vers un fichier, et le code HTML que tu places dans la balise iframe est affiché uniquement si le navigateur ne supporte pas les iframes. Autrement dit, quasiment jamais à l'heure actuelle

    Si c'est trop compliqué pour toi de générer un fichier puis de donner son URL à la src de ton iframe, tu peux utiliser une URI data:.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    monIframe.src = "data:text/html," + encodeURIComponent(codeHTML);
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Par défaut
    Voici 2 petite pages html.

    une page 'mere.html' :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html><head>
         <script type="text/javascript">
         var variable = " " ;
         function jalerte()
              {
         alert (variable) ; 
              }          
         </script>
    </head><body>
         <iframe src="maframe.html"></iframe> 
    </body></html>
    et une page 'maframe.html' :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html><head>
         <script type="text/javascript">
         function modification(X)
              {
         parent.variable = X.value ;
              }          
         </script>
    </head><body onload="document.getElementById('texte').focus()"> 
         <label>Entrez un texte (max: 20 caractères) :</label>
         <input id="texte" type="text" size="8" maxlength="20" onblur="modification(this)">
         <br><br>
         <button type="button" onclick="parent.jalerte()">Click Me!</button>    
    </body></html>
    Si vous les testez vous constaterez que "maframe.html" modifie une variable de sa mère et utilise également une de ses fonctions.

    Cordialement.

    PS : Les frames ont été tellement huées qu'on a fini par les éliminer (HTML5 ne reconnait plus frameset, frame, noframe).
    Quand on veut tuer son chien on dit qu'il a la rage.
    Heureusement il reste les IFRAMES : "Miam Miam !..."

  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 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 658
    Billets dans le blog
    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 !

  6. #6
    Membre émérite

    Profil pro
    Inscrit en
    Juin 2007
    Messages
    748
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 748
    Par défaut
    j'ajoute une petite réfléxion étant tombé sur ce problème cette semaine, dans le cas d'une iframe créé à partir du DOM :

    ne pas oublier que l'iframe à 2 deux étapes de chargement :

    le moment ou on "append" la frame dans le DOM
    le moment ou elle est chargé

    et à ce moment précis (ou elle est chargé), il est possible de ré-injecter les css / javascript etc directement via le DOM parent

    trouvé sur la toile :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
        $('iframe').each(function(){
    			    function injectCSS(){
    				$iframe.contents().find('head').append(
    				    $('<link/>', { rel: 'stylesheet', href: "/bootstrap/css/bootstrap.css", type: 'text/css' })
    				);
    			    }
     
    			    var $iframe = $(this);
    			    $iframe.on('load',function(){
    				injectCSS();
    			    });
    			    injectCSS();
    		    });

Discussions similaires

  1. Écrire dans une iframe avec JavaScript
    Par prilix dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 09/03/2015, 09h26
  2. Site web dans une iframe (protection javaScript)
    Par Husqvarna dans le forum ASP.NET
    Réponses: 3
    Dernier message: 24/06/2008, 08h49
  3. [iframe]pb d'affichage dans une iframe
    Par Destampy dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 01/06/2005, 14h55
  4. [ifrmaes]Charger une page dans une iframe
    Par Destampy dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/05/2005, 15h54
  5. Valider un formulaire contenu dans une iframe
    Par snoopy5.0 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/04/2005, 11h14

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