Javascript dans une iframe ?

Version imprimable

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:

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:

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

06/06/2014, 20h18
iakou

Bonjour.

Citation:

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:

parent.fonction_de_page-mere() ;

Vous pouvez m�me utiliser ou modifier des variables JS appartenant � la page m�re.

Code:

parent.variable_js = "nouvelle_valeur" ;

Cdlt
07/06/2014, 16h06
Watilin

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 :P

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:

monIframe.src = "data:text/html," + encodeURIComponent(codeHTML);

Voici 2 petite pages html.

une page 'mere.html' :
Code:

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:

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

Citation:

Quand on veut tuer son chien on dit qu'il a la rage.

:whistle:Heureusement il reste les IFRAMES : "Miam Miam !..."

09/06/2014, 11h48
SpaceFrog

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

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:

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