Jqueryでインラインフレームに外部CSSを適応したい

下記のコードでリンクを追加しても、外部のCSSが適応しませんでした。

該当のソースコード

Jquery
1<script>
2  $(function(){
3    $('#frame1').on('load',function(){
4      $('#frame1').contents().find('head').append('<link rel="stylesheet" type="text/css" href="data\iframe.css">');
5    });
6  });
7</script>

###　こっちだと適応されました

Jquery
1<script>
2  $(function(){
3    $('#frame1').on('load',function(){
4      $('#frame1').contents().find('body').css('margin','0');
5      $('#frame1').contents().find('td').css('border-style','solid');
6      $('#frame1').contents().find('td').css('border-width','1');
7      $('#frame1').contents().find('tbody').css('width','100%');
8    });
9  });
10  </script>
11
12

m.ts10806

2018/08/09 23:18

確認していただきたいのですが、iframeではなく自身のページでもその記述方法でCSS適用されますか？

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

回答2件

ベストアンサー

ちなみに単に自画面のbodyにappendでCSS読み込み記述を入れても記述は確かに挿入されますが、そのCSSファイルに書いてあるCSS指定は反映はされません。
CSSもそうですがファイルは画面読み込み時に読み込まれるのであとから挿入しても指定は反映されないものです。
直接CSSを書き換えるcss()であれば問題はありませんが。そのiframeは親ページとどのような関係性なのでしょうか？
自身が管理しているサイトであれば直接そのファイルに記述を指定すれば良いですし、そうでない全く無関係の方が管理しているサイトであればし込むのは基本はマナー違反ともいえます（そのサイトを直接見ている人には影響ないですが、外部サイトからiframeで読み込ませない設定もあるくらいなので）

なぜiframeなのか、なぜ後から差し込まなければならないのか、経緯や前提、背景を記載いただけますか？
それがあることで代替案も提示できるかもしれません。

投稿2018/08/10 01:36

m.ts10806

総合スコア80850

gnshd

2018/08/11 01:31

回答ありがとうございます。後から追加しても、反映しないんですね。 iframen内は一応自分で管理しているので、他に方法がなければcss()で追加することにしようかと思います。経緯はというと、Excelで作ったタイムスケジュールを読み込んで、時間が来ると自動でスクロールするソフトをElectronを使って作ろうと思っていて、ExcelでHTMLで書き出して、それをiframeに表示できないか、その際にcssでレイアウトを少し調整できたらと思い、css()で書き換えるより、CSSファイルに書いた方が手間が少ないと思ったので、試したのですが、できないみたいですね。

m.ts10806

2018/08/11 02:28

それなら最初から埋め込んでおきlinkタグにdisabledをつけておいて、任意のタイミングで解除されては？

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

「こっちだと」の例によりクロスドメインの問題はないと思うので、単にタイミングの問題と思われます。
$(function(){…… では早すぎたり、すでにフレームが読み終わっていて遅すぎたりするので、windowのloadにて行えばいいでしょう

JavaScript
1  $(window).on('load', function(event) {
2      $('#frame1').contents().find('head').append('<link rel="stylesheet" type="text/css" href="data/iframe.css" />');
3  });