15

HTML iframe が親から CSS データを継承できるかどうか疑問に思っていました:

Main.html

<html>
  <head>
   <style>
     .highlight{
       background: #008fcc;
      }
   </style>
  </head>
 <body>
   <iframe src='frame.html'></iframe>
 </body>
</html>

frame.html

hello <font class='highlight'>
4

2 に答える 2

14

簡単な答え：いいえ、一般的に、親ページからスタイル/スクリプトを継承/アクセスすることはできませiframeん。

長い答え：別のドメインからのものであるiframe 場合、スタイルの変更やスクリプトの実行はできません（JavaScriptを介してそのDOMコンテンツを読み取ることさえできません）。

一方、親ページと同じドメインからのものである場合は、親ページでこれと同様のことを行うことで、要素のスタイルを変更したり、スクリプトを実行したりできます（この例では、jQueryを使用していますが、プレーンで記述できます。 JavaScript）：

$("#iframe_id").contents().find("#some_div").css({color: "rgb(0, 162, 232)"}); //changed style of a div inside the iframe

内で定義された関数を実行するにはiframe：

$("#iframe_id").contents().document.functionName(functionParams);

お役に立てば幸いです。

于 2012-09-02T12:10:36.477 に答える
5

これは、iframe の html5 seamless boolean パラメータで取得できます。

https://developer.mozilla.org/en-US/docs/HTML/Element/iframe

しかし、現在、最新のブラウザーでは完全には実装されていません。

より簡単な解決策は、すべての CSS を別のファイルに入れ、それをメイン ページと iframe ページの両方に含めることです。

于 2012-09-02T12:24:17.633 に答える