Javascript dans une iframe ?

**xxkirastarothxx** · 06/06/2014, 18h21

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

**iakou** · 06/06/2014, 20h18

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

**Watilin** · 07/06/2014, 16h06

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

**iakou** · 08/06/2014, 15h23

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 !..."

**SpaceFrog** · 09/06/2014, 11h48

Des informations utiles :
http://www.developpez.net/forums/d27...enetre-enfant/

**ascito** · 10/06/2014, 23h55

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

Javascript dans une iframe ?

JavaScript

Discussions similaires

Partager

Partager