jQueryを使用して、iframeコンテンツでCSSを変更します

この投稿では、別のドメイン上のIframedコンテンツのCSSを変更しようとすることに関する失敗した試みのドキュメントも含めました。また、同じドメイン上のIFRAMEでCSSを変更する方法に関する情報もあります。これは、プロキシパスなどなしでは実行できません。

クロスドメインの取り組み

それがどのように機能するか： 比較url 結果 理由 http://www.example.com/dir/page.html 成功 同じプロトコルとホスト http://www.example.com/dir2/other.html 成功 同じプロトコルとホスト http://www.example.com:81/dir/other.html 失敗 同じプロトコルとホストですが、異なるポート https://www.example.com/dir/other.html 失敗 異なるプロトコル http://en.example.com/dir/other.html 失敗 別のホスト http://example.com/dir/other.html 失敗 別のホスト（正確な一致が必要） http://v2.www.example.com/dir/other.html 失敗 別のホスト（正確な一致が必要）

iframe：

を挿入します

<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

この方法は私にはうまくいきませんでした。

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

この方法は私のために働きました。

<span>var frm = frames['frame'].document;
</span><span>var otherhead = frm.getElementsByTagName("head")[0];
</span><span>var link = frm.createElement("link");
</span>link<span>.setAttribute("rel", "stylesheet");
</span>link<span>.setAttribute("type", "text/css");
</span>link<span>.setAttribute("href", "style.css");
</span>otherhead<span>.appendChild(link);</span>

この方法は私のために働きました。

var iframe = top.frames [name] .document; var css = " 『

iframeコンテンツでのCSSの変更に関するよくある質問

別のドメインからiframeのCSSを変更できないのはなぜですか？

これは、Webセキュリティの重要な側面である「同じオリジンポリシー」によるものです。あるページからスクリプトが別のドメインから別のページのプロパティにアクセスまたは変更するのを防ぎます。このポリシーは、潜在的に悪意のあるスクリプトが別のWebページ上の機密データにアクセスするのを防ぐために実装されています。

クロスドメインIFRAMEのCSSを変更する回避策はありますか？ただし、IFRAMEのソースページを制御している場合は、そこにスクリプトを追加して親ページからメッセージを受信して​​必要な変更を加えることができます。簡単な例は次のとおりです。

$（ "＃myiframe"）。contents（）。find（ "body"）。css（ "background-color"、 "red"）;

iframeのボディの背景色が赤に変わります。

jQueryの代わりにJavaScriptを使用して、iframeのCSSを変更できますか？

はい、plane javascriptを使用してiframeのCSSを変更できます。
var iframe = document.getElementbyId（ 'myiframe'）;
var iframedoc = iframe.contentdocument || iframe.contentwindow.document;
iframedoc.body.style.backgroundcolor = "red";
これは、iframeのボディの背景色も変更するでしょう。 IFRAMEは別のドメインからのものである可能性があります。その場合、同種のポリシーのためにCSSを変更することはできません。または、CSSを変更しようとしたときにIFRAMEのコンテンツが完全にロードされていない可能性があります。 IFRAMEが完全にロードされていることを確認するには、ロードイベントを使用できます。

ポストメサージメソッドを使用して、クロスドメインIFRAMEのCSSを変更できますか？変更。

IFRAMEが完全にロードされた後にCSSの変更が適用されるようにするにはどうすればよいですか？

ロードイベントを使用して、CSSを変更する前にIFRAMEが完全にロードされていることを確認できます。 jquery：

$（ "＃myiframe"）でそれを行う方法は次のとおりです。

IFRAMEのコンテンツのCSSをPDFの場合は変更できますか？ CSSは、HTMLまたはXMLで書かれたドキュメントの外観とフォーマットを説明するために使用されるスタイルシート言語です。 PDFファイルには独自のフォーマットがあり、CSSでスタイルを整えることはできません。

CSSを使用してiFrameのサイズを変更できますか？

iframe {

width：500px;
高さ：300px;
}
これにより、iframeの幅と高さがそれぞれ500pxと300pxに変わります。 iframeの境界。これができる方法は次のとおりです。
iframe {

border：none;

}

これにより、iframeの境界線が削除されます。

以上がjQueryを使用して、iframeコンテンツでCSSを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。