Как я могу встроить веб-страницу в другую и изолировать CSS

Question

Мне нужно встроить одну веб-страницу в другую, внутренняя страница будет обернута <div> и не будет содержать html, заголовок заголовка или тому подобное, однако внутренняя страница может содержать <link>, чтобы css, что Я не хочу влиять на внешнюю страницу

В настоящее время я извлекаю html с помощью ajax и вставляю его во внешний dom, чтобы обойти противоречивые стили, извлекаю любые ссылки перед встраиванием в dom, извлекаю css с помощью ajax, анализирую стили и применяю их inline, используя селекторы jquery .

Это имеет очевидные проблемы с такими вещами, как селекторы psuedo, однако основная проблема заключается в том, что стили с внешней страницы влияют на внутреннюю страницу, я не могу разумно сбросить все возможные стили, и мне нужно получить доступ к внутренним страницам, поэтому с помощью iframe не может быть и речи.

Это довольно сложная установка, но мне было интересно, видел ли кто-нибудь что-то похожее или подходил лучше.

Приветствие Dale

Answer 1

Вы можете присвоить уникальный идентификатор div и добавить к селектору все правила в css.

HTML до

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

CSS до

a {color:#999;}

HTML после

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

CSS после

#unique0001 a {color:#999;}