いくつかの iframe セクション (RSS リンクを表示するため) を持つ単純なページがあります。メインページと同じ CSS フォーマットを iframe で表示されるページに適用するにはどうすればよいですか?
1417118 次
28 に答える
479
編集:適切なCORS ヘッダーが設定されていない限り、これはクロスドメインでは機能しません。
ここには、iframe ブロックのスタイルと iframe に埋め込まれたページのスタイルの 2 つの異なるものがあります。通常の方法で 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);
于 2008-10-20T09:07:48.327 に答える
218
Google Calendarでこの問題に遭遇しました。暗い背景でスタイルを設定し、フォントを変更したかった.
幸いなことに、埋め込みコードからの 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>
幸運を！
于 2012-09-20T22:21:17.443 に答える
82
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);
使用するブラウザによっては、同じドメインから提供されたページでのみ機能する場合があることに注意してください。
于 2008-10-20T08:58:47.487 に答える
63
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));
于 2012-11-21T16:17:35.670 に答える
27
hangy が言ったように、iframe でページを制御する場合、最も簡単な方法は、共通のスタイルを持つ共有 CSS ファイルを作成し、html ページからそれにリンクすることです。
そうしないと、iframe 内の外部ページからページのスタイルを動的に変更できる可能性が低くなります。これは、スプーフィングやその他のハッキングに悪用される可能性があるため、ブラウザがクロス フレーム DOM スクリプティングのセキュリティを強化したためです。
このチュートリアルでは、一般的な iframe のスクリプト作成に関する詳細情報が提供される場合があります。 クロス フレーム スクリプティングについてでは、IE の観点からのセキュリティ制限について説明します。
于 2008-10-20T08:52:14.440 に答える
27
iframe は、ほとんどのブラウザーで別の HTML ページのように普遍的に処理されます。iframe のコンテンツに同じスタイルシートを適用する場合は、そこで使用されているページから参照するだけです。
于 2008-10-20T08:37:01.697 に答える
20
上記に少し変更を加えると、次のように機能します。
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で正常に動作します
于 2009-07-28T22:53:01.340 に答える
15
以下は私のために働いた。
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();
于 2011-05-23T16:22:09.950 に答える
13
メイン ページの CSS と JavaScript を再利用したい場合は<IFRAME>、Ajax で読み込まれたコンテンツに置き換えることを検討する必要があります。検索ボットが JavaScript を実行できるようになった今、これはより SEO フレンドリーです。
これは、ドキュメントに別の html ページをインクルードするjQueryの例です。これは よりもはるかに SEO フレンドリーですiframe。ボットが含まれているページをインデックスしていないことを確認するには、許可しないように追加するだけです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 のみを提供するためにそれらを信頼する必要があることを意味します;)
于 2010-03-02T07:16:41.303 に答える
13
上記の 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();
});
于 2013-06-24T11:14:10.567 に答える
11
私のコンパクトバージョン：
<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を使用する必要があります。
すぐに使えるコード(タイマー付き):
<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>
于 2013-03-21T09:07:13.617 に答える
8
ここでの他の回答は、jQuery と CSS リンクを使用しているようです。
このコードはバニラ JavaScript を使用しています。新しい<style>要素を作成します。その要素のテキスト コンテンツを、新しい CSS を含む文字列に設定します。そして、その要素を iframe ドキュメントの head に直接追加します。
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);
于 2016-07-07T00:59:53.687 に答える
7
「doc.open()」と言うときは、iframe 内にどんな HTML タグでも記述できることを意味します。そのため、HTML ページのすべての基本タグを記述する必要があります。iframe ヘッドに CSS リンクが必要な場合は、 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();
于 2010-11-08T06:25:23.147 に答える
6
この方法でiframeのコンテンツのスタイルを設定することはできません。私の提案は、サーバーサイドスクリプト（PHP、ASP、またはPerlスクリプト）を使用するか、フィードをJavaScriptコードに変換するオンラインサービスを見つけることです。それを行う他の唯一の方法は、サーバーサイドインクルードを実行できるかどうかです。
于 2009-03-31T21:36:42.360 に答える
4
iframe ページにアクセスでき、別の CSS をページに iframe 経由でロードした場合にのみ適用したい場合は、ここでこれらの種類の解決策を見つけました
これは、iframe が別のドメインをロードしている場合でも機能します
について調べるpostMessage()
計画は、cssを次のようなメッセージとしてiframeに送信します
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>');
});
于 2016-05-19T20:20:18.843 に答える
3
最も簡単な方法は、iframe と同じ場所に別の div を追加することだと思います。
iframe コンテナーよりも大きくするz-indexことで、独自の div を簡単にスタイルできます。クリックする必要がある場合は、独自の div を使用するだけで、クリックする必要があるpointer-events:none場合に iframe が機能します;)
私はそれが誰かを助けることを願っています;）
于 2014-07-31T12:34:27.240 に答える
3
ここで、ドメイン内には2つのものがあります
- iFrame セクション
- 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" }
));
于 2016-12-29T03:47:08.010 に答える
2
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);于 2016-10-28T03:14:28.803 に答える
0
これは単なる概念ですが、セキュリティ チェックとフィルタリングなしでこれを実装しないでください。そうしないと、スクリプトがサイトをハッキングする可能性があります。
回答: ターゲット サイトを制御する場合は、次のようにレシーバー スクリプトをセットアップできます。
style1) 次のようなパラメーターを使用して iframe リンクを設定します。
http://your_site.com/target.php?color=red
(最後のフレーズは関数a{color:red} によってエンコードされurlencodeます。
2) レシーバーページtarget.phpを次のように設定します。
<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])? $col : "black") ;?> } </style>
..........
于 2016-10-17T08:01:32.613 に答える
-20
さて、私は次の手順に従いました：
- 保持するクラスを持つ Div
iframe - に追加
iframeしdivます。 - CSSファイルでは、
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
これは IE 6 で動作します。他のブラウザでも動作するはずです。確認してください。
于 2010-12-08T09:46:02.987 に答える