head
で定義されている CSS クラスをiframe
メイン ドキュメントの要素に適用しようとしています。
Javascript を使用してクラスを iframe のヘッドからメイン ドキュメントのヘッドにコピーする以外に、そのクラスにアクセスしてメイン ドキュメントに適用する簡単な方法はありますか?
メインドキュメントの次のようなもの(明らかに機能しません)は素晴らしいでしょう:
<div class="#iframe.classtoapply">lorem ipsum</div>
head
で定義されている CSS クラスをiframe
メイン ドキュメントの要素に適用しようとしています。
Javascript を使用してクラスを iframe のヘッドからメイン ドキュメントのヘッドにコピーする以外に、そのクラスにアクセスしてメイン ドキュメントに適用する簡単な方法はありますか?
メインドキュメントの次のようなもの(明らかに機能しません)は素晴らしいでしょう:
<div class="#iframe.classtoapply">lorem ipsum</div>
ねえ、あなたはこのようにすることができます..クラスaとbを持つこのようなiframeがあるとします。 コード
<head>
<style>
.a{color:red;}
.b{
color:blue;
}
</style>
</head>
ここで、その iframe を含むこのようなメイン ページがあるとします。次のようなコードを記述できます。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<iframe src="youriframe.html"></iframe>
<span class="a" >Hi</span>
<span class="b" >It Worked</span>
<script>
$(function() {
$('head').append('<style/>');
setInterval(function() {
if(typeof($('iframe').contents().find('head>style').html())!='undefined') {
$('head>style').eq(0).append($('iframe').contents().find('head>style').html());
}
}
,1);
}
);
</script>
</body>