Как предотвратить вмешательство CSS в инъецированную часть HTML?

В настоящее время я разрабатываю расширение Safari, которое использует внедренный script для дальнейшего ввода некоторого HTML в текущую веб-страницу, а также для ввода некоторых других скриптов, чтобы заставить его работать. Все это прекрасно работает, но проблема в том, что HTML-код, который вводится, подвергается влиянию CSS-таблиц стилей, которые уже импортировала веб-страница. Например, HTML отлично смотрится на сайте Google.com(который имеет относительно немного стилей CSS), но ужасно на StackOverflow.com(какие кнопки стилей и т.д.).

jQuery вводится на веб-страницу во время отображения этого HTML, поэтому у меня есть это. Я пробовал всевозможные вещи, включая прохождение всех элементов и вызов removeClass() для каждого из них, но безрезультатно. Я также пытался добавить классы "CSS reset" и т.д., Но ничего не работает.

Какой лучший способ избежать вмешательства CSS в мой HTML?

3 ответа

Вы не можете предотвратить это. Однако вы можете переопределить правила CSS. Дайте вашему основному элементу уникальный идентификатор (который действительно должен быть уникальным путем обфустации, например, "yourapplicationname_mainelement_name" или что-то в этом роде), затем переопределите все возможные стили, которые могут дать странные эффекты для вашего html.

Ваш плагин:

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

Ваш css:

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

Поскольку ваши правила стиля CSS наиболее специфичны, учитывая ваш идентификатор, они будут переопределять любые параметры, присутствующие на странице, где вводится ваш html.

Далее... Возможно, будет трудно понять, какие правила являются самыми важными. Вы можете использовать firebug или аналогичный, чтобы понять, что переопределяет другое. При разработке приложения вам будет непросто.


что тяжелый. два варианта, как я вижу. Вы можете установить обертку div вокруг всего вашего контента и префикс всего вашего css. Пример:

<div>
 ...
 </div>

таблицу стилей:

.wrappingDiv * {}

Затем, когда вы добавляете jquery, используйте это, чтобы закрыть начальный обертку div перед вашим контентом и обернуть любой следующий контент в другой div.

Вопросы:

  • Возможно только при инъекции другой контент сайта на свой собственный сайт.
  • Это может усложниться в зависимости от того, где вы вводите HTML.

Другой вариант - загрузить таблицу стилей сброса, предназначенную специально для вашего вложенного html. В этом случае только ваш инъецированный html будет обернут, но вам понадобится файл css, для которого reset все атрибуты для всех тегов будут использоваться по умолчанию, прежде чем добавлять собственные стили. Никаких реальных проблем здесь, просто не очень элегантно...

Другим способом было бы использовать элемент, который не наследует таблицу стилей, такую ​​как iframe, но это связано с собственными проблемами...


Я видел на разных плагинах, что они помещают код внутри iframe, и они используют JS для взаимодействия с остальной частью страницы, поэтому вы не можете изменить css внутри.

Также я видел, что при вводе html-кода люди устанавливают стиль содержимого плагина с использованием атрибута "style" внутри тегов, поэтому браузер будет отдавать приоритет css внутри атрибута style, а не css файла. Идея состоит в том, чтобы переопределить css, как правило, с предложением "! Important". Но у вас могут быть проблемы с различными браузерами.

EDIT Я забыл сказать, что мой ответ на случай, когда вы вводите код на чужую страницу, где вы не можете напрямую контролировать css

licensed under cc by-sa 3.0 with attribution.