【JQuery】親ページから　iframeで読み込んだページにCSSを適応させたい

###前提・実現したいこと
【JQuery】親ページから iframeで読み込んだページにCSSを適応させたい

###該当のソースコード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
    $(window).on('load',function() {
		$('#childIframe').contents().find('head').append('<link rel="stylesheet" href="style.css">');
    });
});
</script>

###試したこと
調べて、調べて、異なる所は一通り全部試しました。

・id classではなく、windowにする
・処理が早過ぎたのかもしれないとあったので loadをonにして待ち合わせる
・ajaxのバージョン？を新しくする

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title>

の下に該当のソースを入れたり、

</body> のすぐ上に入れたり

見よう見まねでやっているので、初歩的な間違いかもしれないので
そのページのhtml部分も同じ様に書き換えて試しても、成功しません。

これ以外のjQueryは動きます。

よろしくお願いします。

kei344

2016/10/03 12:09

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、iframeで呼び出しているページは同一ドメイン内でしょうか。

kei344

2016/10/03 12:32

iframeで呼び出しているページは同一ドメイン内でしょうか。ローカルで、Chromeで確認していたりしませんか？

honeybee

2016/10/03 12:39

ローカルで、Chrome等で確認をしていました！サーバーにUPしてみます！

honeybee

2016/10/03 12:46

ありがとうございます！出来ました。お騒がせ致しました、、、

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<iframe src="iframe.html" frameborder="1"></iframe>
9		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
10		<script type="text/javascript">
11			$(function () {
12				var fr = $('iframe').contents();
13				fr.find('p').css({color: 'blue'});
14				fr.find('span').css({color: 'red'});
15			});
16		</script>
17	</body>
18</html>

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>title</title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	</head>
8	<body>
9		<div>
10			<p>paragraph</p>
11			<span>span</span>
12		</div>
13	</body>
14</html>