Style CSS pour iframe

l’intégration d’un élément HTML iframe dans une page est parfois la manière la plus simple pour afficher le contexte d’une page provenant d’un autre site et ce pour différentes raisons.
Mais si le plus aisé est bien de convoquer un contexte de navigation imbriqué dans son document, il n’en va pas de même pour l’habillage des élements affichés. En effet la fenêtre enfant possédant déjà ses propres feuilles de styles et ses scripts.
Intervenir d’ailleurs sur un site d’un autre domaine que le contexte de navigation parent peut poser des problèmes de sécurité. Mais le cas qui nous occupe ici est différent de ce cas de figure, il s’agit en effet de réutiliser un formulaire déjà existant et purement fonctionnel sur le même domaine. (voir shéma ci-dessous).
formulaire

Relooker le formulaire

Nous savons par le biais d’une iframe exploiter un formulaire existant, afin de le convoquer dans un autre contexte, mais pour l’habiller différemment, nous devons pouvoir modifier ces styles directement depuis le modèle de document embarqué, dans ces conditions la solution est pouvoir ajouter une requête CSS à la fin du head de l’élément appelé.
La solution proposée ici est par le biais du JS d’ajouter un style.css à la frame enfant.
Afin de ne pas voir l’habillage existant de l’iframe on n’affichera cette dernière qu’à la fin du code


jQuery( document ).ready(function() {
   jQuery('iframe').hide(0);	

	jQuery('iframe').load(function(){
		var lienFeuilleStyle = document.createElement('link');
		lienFeuilleStyle.setAttribute('rel', 'stylesheet');
		lienFeuilleStyle.setAttribute('type', 'text/css');
		lienFeuilleStyle.setAttribute('href', 'http://www.i-com.fr/formulaire/style.css');
		jQuery('head', window.frames[0].document).append(lienFeuilleStyle);

		jQuery(this).show();
	});

});

Isoler le formulaire

la nouvelle feuille de style prendra ainsi le pas sur celle existante, on peaufinera notre iframe en veillant à la dimensionner correctement pour n’afficher que les éléments qui nous intéresse ici l’input à renseigner et le bouton d’envoi.
si d’autres élements du dom viennent à nous gêner, rien de plus facile on les mettra en display:none dans notre CSS.
Le formulaire d’abonnement à la newsletter est ici affiché sur un ipad dans le hall d’accueil de l’agence. Le contexte est clairement défini pour un affichage unique de 768x1024px
Il ne reste plus qu’à positionner l’iframe correctement, ici dans un div parent positionné en absolute.
Et voilà nous avons ainsi valoriser un formulaire d’abonnement, sans rien avoir à créer.

formulaire2



Laissez un commentaire