Comment puis-je intégrer une page Web dans un autre et isoler CSS

Question

Je dois incorporer une page Web dans une autre, la page intérieure sera entourée d'un <div> et ne pas contenir le html, titre de tête ou d'autres choses comme ça, mais la page intérieure peut Je renferme actuellement <link> pour que je ne veuille pas affecter la page externe

Je récupère actuellement le html avec ajax et l'insère dans la dom extérieure, pour contourner les styles en conflit j'extrais tout lien avant de l'intégrer dans le dom, récupère ce CSS avec ajax, analyse les styles et applique-les en ligne en utilisant les sélecteurs jquery. Cela a des problèmes évidents avec des choses comme les sélecteurs de pseudo, mais le principal problème est que les styles de la page externe affectent la page intérieure, je ne peux pas réinitialiser tous les styles possibles, et j'ai besoin d'accéder aux pages intérieures dom donc en utilisant un iframe est hors de question.

C'est une configuration assez complexe, mais je me demandais si quelqu'un avait vu quelque chose le long de lignes similaires ou avait une meilleure approche.

Vive Dale

Answer 1

vous pouvez affecter un identifiant unique à la div et préfixer le sélecteur à toutes les règles du css.

HTML Avant

<div> 
    <!--start ajax content --> 
    <a href="#"> Content </a> 
    <!--end ajax content --> 
</div> 

CSS Avant

a {color:#999;} 

HTML Après

<div id="unique0001"> 
    <!--start ajax content --> 
    <a href="#"> Content </a> 
    <!--end ajax content --> 
</div> 

CSS Après

#unique0001 a {color:#999;}