Comment empêcher les interférences CSS dans un fichier HTML injecté?

Je suis en train de développer une extension Safari qui utilise un script injecté pour injecter du code HTML dans la page Web actuelle, ainsi que d'autres scripts pour le faire fonctionner. Tout cela fonctionne très bien, mais le problème est que le HTML injecté est affecté par les feuilles de style CSS que la page Web a déjà importées. Par exemple, le HTML semble parfait sur Google.com (qui a relativement peu de style CSS), mais terriblement sur StackOverflow.com (quels boutons de styles, etc.). JQuery est injecté dans la page Web au moment de l'affichage de ce code HTML, donc je l'ai disponible. J'ai essayé toutes sortes de choses, y compris la marche à travers tous les éléments et en appelant removeClass() sur chacun d'eux, en vain. J'ai également essayé d'ajouter des classes "reset CSS", etc, mais rien ne semble fonctionner.Comment empêcher les interférences CSS dans un fichier HTML injecté?

Quelle est la meilleure façon d'éviter que le CSS n'interfère avec mon code HTML?

Source

2010-08-22 Anshu Chimala

double possible de [ Existe-t-il un moyen de "mettre en sandbox" un bloc html loin du CSS de sa page sans utiliser les iframes?] (Http://stackoverflow.com/questions/3529513/is-there-a-way-to-sandbox-an-html- block-away-from-its-pages-css-without-using) –

Vous ne pouvez pas empêcher cela. Cependant, vous pouvez remplacer les règles CSS. Donnez à votre élément principal un identifiant unique (qui devrait vraiment être unique par une obfustation, comme "votreapplicationname_mainelement_name" ou quelque chose du genre), puis remplacez tous les styles possibles qui pourraient donner des effets étranges sur votre code html.

Votre plugin:

<div id="yourapplicationname_mainelement_name"> 
    <p>My paragraph that must not be styled</p> 
</div>

Votre css:

#yourapplicationname_mainelement_name p { 
    display: block; 
    color: black; 
    background: white; 
    position: relative; 
    ... and so on ... 
}

Comme vos règles de style CSS sont les plus spécifiques, compte tenu de votre identifiant, ils annulera tous les paramètres présents sur la page où votre code html est injecté. En outre ... Il pourrait être difficile de voir quelles règles sont les plus importantes. Vous pouvez utiliser firebug ou similaire pour comprendre ce qui surcharge un autre. Vous aurez du mal à le faire lorsque vous développerez votre application.

Source

2010-08-22 09:38:23 Johan

J'ai essayé quelque chose de similaire, bien que je suppose que les noms de classe aient pu être en conflit ou quelque chose comme ça. Cela semble être la bonne façon d'y aller. Merci. –

c'est difficile. deux options comme je le vois. Vous pourriez définir un div enveloppant tout votre contenu et préfixer tous vos CSS avec cela. exemple:

<body> 
    <div class='wrappingDiv'> 
    ... 
    </div> 
</body>

stylesheet:

.wrappingDiv * {}

Ensuite, lorsque vous injectez utilisation jquery que pour fermer la div d'emballage initial avant votre contenu et pour envelopper tout contenu suivant dans l'autre div d'emballage.

Questions:

uniquement possible si vous injectez autre contenu du site sur votre propre site.
Cela pourrait se compliquer selon l'endroit où vous injectez html.

L'autre option consiste à charger une feuille de style de réinitialisation qui cible spécifiquement votre fichier html injecté. Dans ce cas, seul votre fichier html injecté sera enveloppé, mais vous aurez besoin d'un fichier css qui réinitialise tous les attributs de tous les tags avant d'ajouter vos propres styles. Pas de réel problème ici, pas très élégant ...

Une autre façon serait d'utiliser un élément qui ne hérite pas stylesheet comme un iframe, mais qui vient avec ses propres problèmes ...

Source

2010-08-22 09:53:28 lnrbob

j'ai vu sur différents plug-ins qu'ils mettent le code à l'intérieur d'un iframe et ils utilisent JS pour interagir avec le reste de la page, donc vous ne pouvez pas changer le css à l'intérieur. J'ai également vu que lors de l'injection de code html, les gens définissent le style du contenu du plugin en utilisant l'attribut "style" dans les balises afin que le navigateur donne la priorité au css dans l'attribut style et non au fichier css. L'idée est de surcharger le CSS, généralement avec la clause "! Important". Mais vous pourriez avoir quelques problèmes sur les différents navigateurs

EDIT j'ai oublié de dire que ma réponse est le cas que vous injectez le code à la page de quelqu'un d'autre où vous ne pouvez pas contrôler directement le code CSS

Source

2010-08-22 09:54:12 pleasedontbelong

Comment empêcher les interférences CSS dans un fichier HTML injecté?

Répondre

Questions connexes