Styles pour les classes CSS dans un iframe

Question

Inspiré par le nouveau User Flair, mais la question s'applique également au cas général. Disons que je veux inclure quelque chose comme ça sur un site qui ne me permet pas de spécifier des styles externes ou d'utiliser du code JavaScript. La seule chose que je peux faire est de coller dans un object, embed, ou iframe, et un autre HTML simple. De plus, la largeur de l'espace est seulement de 160 pixels, plutôt que les 200 nécessaires par défaut pour le badge flair.

Pour résoudre ce problème, je veux définir des styles pour la classe valuable-flair dans l'iframe, à savoir changer la largeur pour être 160px au lieu de 200px. Ensuite, les choses iront bien, tant que le nom d'utilisateur ne se chevauche pas (et même alors, une fois que je l'ai compris, je peux utiliser la même technique pour jouer avec ça aussi).

Comment peut-il être implémenté?

Answer 1

Vous ne pouvez pas modifier la conception de l'iframe en utilisant CSS si vous ne pouvez pas contrôler la page dans l'attribut SRC.

Je vous recommande de lire plutôt le src de l'iframe côté serveur (en utilisant PHP, Python ou ce que vous voulez), par ex. fopen() le src et fread() dans une variable, que certains str_replace sur cette variable (pour extraire le contenu, supprimer < body>, </body> ...) jouer avec le design et placer le résultat dans votre page.

De cette façon, vous pouvez contrôler la conception.

Answer 2

Si le CSS pour la largeur et la hauteur étaient exprimées en pourcentages plutôt qu'en valeurs absolues, vous pouvez ajuster la largeur en ajustant le IFrame. Cependant, si l'hébergement d'une implémentation personnalisée n'est pas possible pour vous, vous n'avez pas de chance sans JavaScript. Et si je ne contrôle pas le code du serveur?