iFrame est un moyen très pratique d’afficher un contenu externe sur votre page Web. Cependant, c’est un peu compliqué si vous souhaitez ajouter ou modifier le style CSS existant. Vous ne pouvez pas simplement ajouter CSS sur la page parent/wrapper. Dans ce tutoriel, nous allons vous montrer comment utiliser JavaScript pour injecter du CSS dans iFrame.
dans l’extrait ci-dessous, une fois que tout a été chargé, nous obtiendrons l’élément iFrame par ID. Ensuite, obtenez le contentDocument et injectez nos styles dans iFrame en utilisant innerHTML.,
Ou vous pouvez le faire avec jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
exemple
par exemple, voici la page de tutoriel 3D CSS Progressbar que nous voulons ajouter à la nôtre en utilisant iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
Supposons que nous voulons changer la longueur de la barre de progression de 45%. Malheureusement, nous ne pouvons pas faire quelque chose comme ça à partir de notre CSS parent.
.bar { width: 45%; /* This will not work */}
essayons D’utiliser JavaScript. Il est important que vous deviez attendre que l’iFrame soit chargé avant de pouvoir injecter le CSS., Dans ce cas, nous allons mettre le code dans onload event listener.
Voici le résultat.
ajout D’un fichier CSS à iFrame
Vous pouvez ajouter un fichier CSS entier au lieu d’injecter des styles séparés en créant un lien et l’ajouter à la tête de l’iframe.