17

私は、自分が制御できないWebページにJS + CSS+HTMLを挿入するプロジェクトに取り組んでいます。

挿入されたコードのホストページのスタイルが気になります。挿入されたコードは、自分のスタイルにのみ従い、自分のスタイルには従わないようにします。

現時点で私が考えることができる唯一の方法は、コンテナ<div>のクラスのすべての可能なタグを明示的に指定し（事前定義された既知のブラウザのデフォルトを使用して）、それらのルールの継承に依存して残りの部分に伝播することです。挿入されたHTML。このCSSは、ページの<head>タグの下部に表示する必要があります。

しかし、それが最善の解決策ではないと思います。また、それを実装することを楽しみにしていません。確かにもっと良い方法があります。

4

6 に答える 6

12

他の人は、CSSがページに影響を与えないようにするだけでなく、CSSが優先されるようにするための非常に優れた方法を提案していますが、あなたはページのCSSがあなたに影響を与えることに最も関心があるようです-つまり、ファンキーで予期しないスタイルを追加します（すべてのdivの背景はピンクです）。

それらのスタイリングが注入されたコードに影響を与えるのを防ぐために私が考えることができる唯一の方法は、のように、注入したものをサンドボックス化することですiframe。そうでなければ、定義しなければならないことが多すぎるだけです。" "セレクター（またはもっと良いのは" " padding、したがって、CSSを完全に制御できるようにするために、独自のコンテンツをオーバーライドするだけです。bordermarginbackground*#yourid *

編集：オムニセレクターを使用してすべてをベースラインにリセットしている場合、後者のソリューションは必ずしもそれほど苦痛ではないことを理解しています。

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

私はそのような解決策を書いた人を見つけました。ページを十分に下にスクロールすると、（SuzyUKから）表示されます。完全には見えませんが、確かに良いスタートです。

（私も、これを防ぐ良い方法があるかどうか知りたいと思います。ページにコードを挿入する前にGreasemonkeyスクリプトを作成し、ページのCSSをオーバーライドするためにCSSを作成する必要がありましたが、その場合は私のターゲットが誰であるかを知っていて、CSSをページに直接合わせることができました。）

于 2009-04-09T04:17:55.240 に答える
3

<div>挿入されたHTMLを、次のような特別に分類されたHTMLでラップします。

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

次に、CSSで、すべてのルールにプレフィックスを付け、すべてのルールで！important.my-super-specialized-unique-wrapperを使用します。これにより、クライアントブラウザは、ターゲットとなる可能性のある他のスタイルに関係なく、一致する要素に対してルールを最高として扱うように指示されます。ただし、制御できない他のルールがより具体的である場合でも同様です。

于 2009-04-09T04:12:37.283 に答える
1

CSSセレクターを非常に具体的にする必要があります。つまり、ホストページのCSSルールよりもはるかに具体的です。HTMLのみをリセットするように変更された一種のグローバルCSSリセットを追加することもできます。つまり、すべての色、背景、フォント、パディングなどを単一の標準にリセットするものを意味します。そこから、独自のスタイルを構築できます。

于 2009-04-09T04:12:17.080 に答える
1

次のようなインライン形式でhtml要素を挿入してみませんか。

<p style="color:red">This to be injected</p>

インラインスタイルは他のどのルールよりも優先され、挿入するためにすでにマークアップを作成しています。

他の解決策は、要素に非常に特定のDOM IDを使用してから、追加したCSSでそれらをスタイル設定することです。

于 2009-04-09T04:14:06.670 に答える
0

Mozilla ブラウザーを使用している場合、実際には (違法ではあるが) 目に見える DOM コンテンツを <body> 要素の外側の <html> 要素に追加できます。これにより、本文に一致し、コンテンツに継承されるスタイルが回避されます。一部のスタイルが html で一致する可能性があるため、この手法は無効になりますが、私はそれが役立つことを発見しました。

例えば。jquery の使用: $('html').append('<div id="mycontent"> 何とか何とか </div>');

ライブラリのインスタンスが、変更中のページによって定義されたライブラリの使用を妨げたくない場合、一般的なライブラリを使用すること自体が困難です。Greasemonkey の '@require' がうまくいきませんでした。jquery スクリプトによって割り当てられた 2 つまたは 3 つのグローバル名の既存の値を保存し、ライブラリのインスタンスを DOM に挿入し、それがロードされるのを待つ必要がある (ただし可能です!) ことがわかりました (タイマーを使用する必要がありました。それは面倒ですが、それを回避する方法がわかりませんでした)、自分の名前空間内のグローバルに割り当てられた値を自分で使用するためにキャッシュし、保存された値を復元します。

于 2009-04-23T06:57:26.383 に答える