[WordPress] Iframe に CSS を適用する方法ですか?

スポンサーリンク

Question

いくつかの iframe をしている、単純なページをある

セクション (表示する rss フィードのリンク)。どのように私は書式を適用できます同じ CSS のメイン ページから、iframe で表示されるページに?

答え

編集: これは、クロス ドメインは動作しません

そこはここで 2 つの異なる事: iframe に埋め込まれた iframe ブロックのスタイルと、ページのスタイル。Iframe ブロックのスタイル、通常の方法を設定できます:


iframe に埋め込まれたページのスタイルは子ページに含めることによってどちらかセットをする必要があります:


または java スクリプトの設定を親ページからロードすることができます:

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

答え

Google カレンダー でこの問題に会った。暗い背景のスタイルし、フォントを変更したい

幸いにも、埋め込みコードから URL 制限になかったへの直接アクセス。だから PHP 関数”オススメ サイト“を使用して、ページからのコンテンツ全体を取得することは。Ex. google.php なる変更でオリジナルのコンテンツが含まれている google の url を呼び出す代わりに、サーバー上にある php ファイルを呼び出すことは、従って:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

あなたのスタイル シートへのパスの追加:

$content = str_replace('','', $content);

(これはあなたのスタイル シートを配置ちょうど頭部 endtag の前に最後)

ベース url、元の url を形成は、css と js を比較的呼び出されます場合に指定します:

$content = str_replace('','', $content);

最終的な google.php ファイルのようになります:

','', $content);
$content = str_replace('','', $content);
echo $content;

iframe を変更するコードを埋め込む:


幸運 !

答え

java スクリプトの設定を使用してそれを操作することを試みることができる場合は、iframe のコンテンツは完全にあなたのコントロール下にないまたは異なるスタイルを持つ別のページからコンテンツにアクセスする場合します

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

に応じてどのようなブラウザーを使用することこの注意可能性があります同じドメインから提供されるページにのみ動作します

答え

  var $head = $("#eFormIFrame").contents().find("head");

  $head.append($("",
                { rel: "stylesheet", href: url, type: "text/css" }
              ));

答え

iframe が普遍的に別の HTML ページのようなほとんどのブラウザーによって処理されます。あなたは、iframe のコンテンツを同じスタイル シートを適用する場合は、そこに使用されるページから参照だけです

答え

かどうか hangy として、iframe でページは、一般的なスタイルで、共有の CSS ファイルを作成する最も簡単なアプローチは制御しちょうどからリンクする html ページ

以外の場合は、iframe の外部のページからのページのスタイルを動的に変更することができなくなる可能性です。これはブラウザーは、クロス フレーム スクリプティング可能な誤用のなりすましなどの dom ハッキング上、セキュリティを強化しているためにです

このチュートリアル は、一般的に iframe をスクリプトについての詳細を提供します。IE の観点からセキュリティ制限について説明します 約クロス フレーム スクリプティングします

答え

上記の変更はほとんどの作品:

var cssLink = document.createElement("link") 
            cssLink.href="pFstylesEditor.css"; 
            cssLink .rel="stylesheet"; 
            cssLink .type = "text/css"; 

            //Instead of this
            //frames['frame1'].document.body.appendChild(cssLink);
//Do this

            var doc=document.getElementById("edit").contentWindow.document 

            ///If you are doing any dynamic writing do that first
            doc.open();
            doc.write(myData);
            doc.close();

            //Then append child
doc.body.appendChild(cssLink);

少なくとも ff3、ie8 で正常に動作

の答え

私のために働いた次

var iframe = top.frames[name].document;
var css = '' +
          '';
iframe.open();
iframe.write(css);
iframe.close();

の答え

ここを使わずに直接

、余分なスタイル シートをロードする CSS コードを適用する方法です

var head = jQuery("#iframe").contents().find("head");
var css = '';
jQuery(head).append(css);

iframe ページにバナー非表示となります。ご提案いただきありがとうございます !

答え

CSS を再利用する場合で、メインページ多分から JavaScript 置き換えてください




の答え

まあ、これらの手順を従っている:

  1. iframe を保持するクラスを持つ Div
  2. 追加 iframe 事業本部
  3. の CSS ファイル、

    divClass {幅: 500 px; 高さ: 500 px;}divClass iframe{幅: 100 %; 高さ: 100 %;}

この IE 6 で動作します。他のブラウザーで動作するはずです、チェックを行う !

http://stackoverflow.com/questions/27465213/styling-elements-in-an-iframe

スポンサーリンク

Leave a Reply