2

現在、フォーラム（diskusjon.no）のカスタムCSSを作成していますが、ページの特定の部分で苦労しています。IPBoard-forumのエディターは元のhtmlタグ内のhtmlタグであり、拡張機能Stylishを介して設定されたCSSはページのこの部分に到達しません。

構造は次のようなものです。

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

これで、私のスタイルは2番目のhtmlタグの後を除いてすべてに影響するので、私の質問は次のとおりです。-Stylishを使用してCSSを追加しているときに、ページのこの部分に到達することは可能ですか。つまり、HTMLにアクセスできません。

これが私が話している部分のGoogleインスペクターの写真です：

4

2 に答える 2

2

<iframe>タグは外部ページをロードすることを目的としているため、独自のスタイルシートがあります。そうすれば、あなたのスタイルがそれを妨げることはできません。

解決策は、ページがiframeにロードされた後にjavascriptを使用することです。あなたはこれを参照することができます：CSSをiframeに適用する方法は？質問。

于 2011-12-01T23:56:00.117 に答える
1

スタイリッシュは、iframe 内にあるかどうかに関係なく、ページを同じように扱います。したがって、解決策は、iFramed ビットを個別にスタイルすることです。

たとえば、ページjsbin.com/osajuz/editがあり、この iFrame が含まれているとします。

<iframe src="http://www.drudgereport.com/"></iframe>

次に、次のようなスタイリッシュなスタイルを作成できます。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

動作します。

スタイルを作成してjsbin.com/osajuzにアクセスすると、次のように表示されます。

iFrame スタイルのプレビュー

同様に、フレームに URL がない場合は、フレームを含むページと同じドメインおよび URL からのページとして扱われます。スタイリッシュなルールは引き続き適用されます。

たとえば、このスタイリッシュなスタイルを作成する場合:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

jsbin.com/abazay/3/edit#previewにアクセスすると、両方の「内部」iFrame に両方のスタイルが適用されていることがわかります。

ただし、注意しないと、iFrame を操作している JS が何であれ、CSS スタイルを上書きする可能性があることに注意してください。!importantしたがって、この問題に対処するためにフラグを自由に使用してください。

于 2011-12-02T00:59:54.600 に答える