シンプルなページで、いくつかのiframe部分(RSSのリンクを表示する)を持っています。メインページと同じCSSフォーマットをiframeで表示されるページにも適用するにはどうしたらよいでしょうか?
編集:適切な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);
この問題は 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);
(これにより、スタイルシートが「ヘッド」エンドタグの直前に配置されます。)。
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>
幸運を。!
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);
使用するブラウザによっては、同じドメインから提供されているページでのみ動作する可能性があることに注意してください。
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));
< link>
を使用して追加のスタイルシートをロードせずにCSSコードを直接適用する方法は次のとおりです。
var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
'#banner{display:none}; ' +
'</style>';
jQuery(head).append(css);
これはiframeページのバナーを隠します。 ご提案ありがとうございます。!
iframeでページを制御する場合、hangyさんがおっしゃるように、共通のスタイルを持つ共有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で正常に動作します。
メインページからCSSとJavaScriptを再利用する場合は、 < IFRAME>
をAjaxでロードされたコンテンツに置き換えることを検討する必要があります。 検索ボットがJavaScriptを実行できるようになったとき、これはよりSEOフレンドリーになります。
これは、ドキュメントに別のhtmlページを含むjQueryの例です。 これは「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だけを提供するためにそれらを信頼する必要があることを意味します;)。
上記の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();
});
私のコンパクトバージョン:
<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>
ここでの他の回答は、jQueryおよびCSSリンクを使用しているようです。
このコードはバニラ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);
"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();
iframeページにアクセスでき、別のCSSをページのiframe経由でロードした場合にのみ適用したい場合は、ここでこれらの種類の解決策を見つけました。
これは、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>');
});
このようなメイン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>
これは最良の解決策ではない可能性があり、確かに改善できますが、親ウィンドウに「スタイル」タグを保持する場合は、別のオプションです。
ここでは、ドメイン内に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" }
));
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>