web-dev-qa-db-ja.com

CSSをiframeに適用する方法

（RSSリンクを表示するための）いくつかのiframeセクションを含む単純なページがあります。メインページからiframeに表示されているページに同じCSS形式を適用するにはどうすればよいですか。

htmlcssiframe
931
John

編集： 適切な CORSヘッダが設定されていない限り、クロスドメインでは機能しません 。

ここには2つの異なることがあります：iframeブロックのスタイルとiframeに埋め込まれたページのスタイルです。 iframeブロックのスタイルは通常の方法で設定できます。

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

Iframeに埋め込むページのスタイルは、それを子ページに含めることで設定する必要があります。

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

あるいは、Javascriptを使って親ページからロードすることもできます。

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);
404
Tamas Czinege

この問題は Googleカレンダー で解決しました。私は暗い背景にそれをスタイルしてフォントを変更したいと思いました。

幸いなことに、埋め込みコードのURLは直接アクセスに制限がないので、PHP関数file_get_contentsを使用することで、ページからコンテンツ全体を取得することが可能です。 GoogleのURLを呼び出す代わりに、サーバーにあるphpファイルを呼び出すことができます。 google.php、これにはオリジナルのコンテンツが修正されて含まれます。

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

スタイルシートへのパスを追加します。

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

（これはあなたのスタイルシートをhead終了タグの直前に置きます。）

Cssとjsが相対的に呼び出される場合は、元のURLから基本URLを指定します。

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

最後のgoogle.phpファイルは次のようになります。

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

次に、iframe埋め込みコードを次のように変更します。

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

がんばろう！

188
SequenceDigitale.com

Iframeのコンテンツが完全に自分の管理下にない場合、または異なるスタイルの異なるページからコンテンツにアクセスする場合は、JavaScriptを使用してコンテンツを操作してみてください。

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);

使用しているブラウザによっては、これは同じドメインから提供されているページでのみ機能する場合があります。

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

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
56
Rami Sarieddine

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

33
hangy

Hangyが言ったように、iframeでページを制御する場合、最も簡単な方法は共通のスタイルで共有CSSファイルを作成してから、あなたのhtmlページからそれにリンクすることです。

それ以外の場合は、iframe内の外部ページからページのスタイルを動的に変更することはできません。これは、スプーフィングやその他のハックのために悪用される可能性があるため、ブラウザがクロスフレームDOMスクリプティングのセキュリティを強化しているためです。

このチュートリアル はiframeの一般的なスクリプティングに関するより多くの情報をあなたに提供するかもしれません。 クロスフレームスクリプティングについて はIEの観点からセキュリティ制限を説明しています。

26
Ash

<link>を使用せずにCSSコードを直接適用して追加のスタイルシートを読み込む方法は次のとおりです。

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

これはiframeページのバナーを隠します。ご提案ありがとうございます。

25
domih

ちょっとした変更を加えた上記のものはうまくいく：

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でうまく動作する

20
Tom Merchant

メインページからCSSとJavaScriptを再利用したい場合は、おそらく<IFRAME>をAjaxがロードしたコンテンツに置き換えることを検討してください。検索ボットがJavaScriptを実行できるようになったとき、これはよりSEOフレンドリーになりました。

これは jQuery の例で、あなたの文書に別のHTMLページを含みます。これはiframeよりもはるかにSEOフレンドリーです。ボットがインクルードされたページのインデックスを作成していないことを確認するために、robots.txtを許可しないようにそれを追加するだけです。

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

また、Googleから直接jQueryをインクルードすることもできます。 http://code.google.com/apis/ajaxlibs/documentation/ - これは、オプションで新しいバージョンを自動的にインクルードし、速度を大幅に向上させることを意味します。また、jQueryだけを配信するためには、それらを信頼する必要があります。

13
sorin

次は私のために働いた。

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();
11
peter

上記のjQueryソリューションを拡張して、フレームの内容をロードする際の遅延に対処します。

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});
8
David Bradshaw

マイ コンパクト版 ：

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

しかし、時々iframeはロードされたウィンドウ上で準備ができていないので、 timer を使う必要があります。

すぐに使えるコード （タイマー付き）：

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

...とjQueryのリンク：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
8
Zbigniew Wiadro

"doc.open（）"と言うとき、それはあなたがiframeの中にどんなHTMLタグも書くことができることを意味します、それであなたはHTMLページのためのすべての基本タグを書くべきですCSSリンクを含むiframe。例を挙げます。

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();
6
parham fazel

このようにiframeの内容をスタイルすることはできません。私の提案は、サーバーサイドのスクリプト（PHP、ASP、またはPerlスクリプト）を使用するか、フィードをJavaScriptコードに変換するオンラインサービスを見つけることです。それを行うための他の唯一の方法は、サーバーサイドインクルードを実行できる場合です。

5
PageCandy

これを試すことができます：

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
5
Ajay Malhotra

ここでの他の答えはjQueryとCSSリンクを使うようです。

このコードはVanilla JavaScriptを使用しています。新しい<style>要素を作成します。その要素のテキストコンテンツを新しいCSSを含む文字列に設定します。そしてそれはその要素をiframeドキュメントのヘッドに直接追加します。

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);
3
jtheletter

Iframeページにアクセスしていて、iframe経由でページにロードしたときにのみ別のCSSを適用したい場合は、このような場合の解決策が見つかりました。

iframeが別のドメインをロードしている場合でもこれは機能します。

postMessage()をチェックする

計画は、次のようなメッセージとしてiframeにCSSを送信する

iframenode.postMessage('h2{color:red;}','*');

*は、iframe内のドメインに関係なく、このメッセージを送信します。

そして、iframeでメッセージを受け取り、受け取ったメッセージ（CSS）をそのドキュメントヘッドに追加します。

iframeページに追加するコード

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});
2
CodeRows

私はこのようにメインHTMLにスタイルを入れるための別の解決策を見つけました

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

それからiframeでこれを行います（js onloadを参照）。

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

そしてjsで

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

それは最善の解決策ではないかもしれませんし、それは確かに改善することができますが、親ウィンドウに "style"タグを保持したい場合は別の選択肢です。

2
jperelli

Iframeにスタイルタグを挿入できます。 こちらも投稿しました...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>
2
Palanikumar

一番簡単な方法は、iframeと同じ場所にdivをもう1つ追加することです。

そのz-indexをiframeコンテナよりも大きくするので、自分のdivを簡単にスタイルすることができます。クリックする必要がある場合は、自分のdivにpointer-events:noneを使用するだけです。クリックする必要がある場合はiframeが機能します。

それが誰かに役立つことを願っています;）

1
Mateusz Winnicki

ここでは、ドメイン内に2つのことがあります

  1. iFrameセクション
  2. IFrame内に読み込まれたページ

そのため、これら2つのセクションを次のようにスタイル設定します。

1. iFrameセクションのスタイル

それはその尊敬されているidまたはclass名でCSSを使ってスタイルすることができます。親スタイルシートでもスタイルを設定できます。

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. iFrame内に読み込まれたページのスタイルを設定します

このスタイルは、Javascriptを使用して親ページからロードできます。

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

それからそのCSSファイルを尊敬されるiFrameセクションに設定します

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

ここでは、この方法でiFrame内のページのヘッド部分を編集できます。

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));
1
K.Suthagar
var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);
0
Jeeva

別の方法として、lib以下のようにCSS-in-JSテクノロジを使用することもできます。

https://github.com/cssobj/cssobj

JSオブジェクトをCSSとしてiframeに動的に注入できます。

0
James Yang

素晴らしいスクリプト はノードをそれ自身のiframeバージョンに置き換えます。 CodePen デモ

enter image description here

使用例： 

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});
0
karlisup