前提・実現したいこと
jQueryを使ってTwitterのWidgetのHeadに外部化したCSSファイルを適用しようと試みました。
まずはホスティングの段階から苦戦し、FirebaseでのCSSファイルの外部化は諦めました。Github PagesでCSSファイルの外部化をすることにしました(これは以前も使っていたことがあり成功)。
ちなみに貼り付けるTwitterのWidgetはhttps://publish.twitter.comで作成しました。配置する数は2つで1つは@IDのWidget、もう1つはリストのWidgetです。どちらもタイムライン形式を選択しました。
発生している問題・エラーメッセージ
Refused to apply style from 'https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Google Chromeで確認したところ、上のエラーメッセージが出ていました。要素の検証では下のようにWidgetのHead部分の中に<link>が埋め込まれてはいました。
<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">
しかしTwitterのWidgetには何ら外部化ファイルの内容が反映されていませんでした。
該当のソースコード
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <a class="twitter-timeline" data-lang="ja" data-height="600" data-theme="light" data-link-color="#E81C4F" href="*Widget1*">Widget1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a class="twitter-timeline" data-lang="ja" data-height="600" data-link-color="#E81C4F" href="*Widget2*">Widget2</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script> function changeTwitterWidgetDesign(){ var $twitter_widget = $('iframe.twitter-timeline'); var $twitter_widget_contents = $twitter_widget.contents(); if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){ $twitter_widget_contents.find('head').append('<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">'); } else { setTimeout(function(){ changeTwitterWidgetDesign(); }, 350); } } changeTwitterWidgetDesign(); </script>
試したこと
Googleでエラーメッセージを検索しました。type="text/css"を書き忘れており、それを書いたら直ったというやりとりは見つかりましたが、ソースコードの通り記載されているので解決しませんでした。
TwitterのWidgetが廃止になる前に私自身が作成したTwitterのWidgetには、今もまだ外部化ファイルのCSSが適用されており、デザインも反映されています。しかし外部化したCSSファイルを適用するという原理は変わらないので関係ないのではないかと思います(素人なのでわかりません)。
エラーメッセージから素人なりに考えたところ、外部化されたCSSファイルを「text/plain」として認識しているためにスタイルが適用されていないのだと思います。しかし「text/css」と指定しているのに何故でしょうか?また、「text/plain」というのもわかりません。
因みに外部化したCSSファイルの中身は圧縮してあります(オンラインサービスを利用)。
iframeのHeadに外部化したCSSファイルを適用するコード
余談です。気になるので良かったら教えていただきたいです。以下のコードでiframe(TwitterのWidget)に外部化したCSSファイルを適用しようとしたところ、要素の検証ではHeadに<link>が埋め込まれませんでした。これは何故でしょうか?上に貼り付けてある(埋め込みに成功している)コードと何が違うのでしょうか?
jQueryはおろかJavascriptの知識も皆無といっていいのでさっぱりわかりません。
上のコードは何かを条件として適用させようとしているものと推測しています(Timeoutは待ち時間で繰り返す?)。下のコードは有無を言わせずにシンプルにHeadに埋め込むものだと思います。何故下のコードではHeadに埋め込むことすらできないのかが知りたいです。
<script> $(window).load(function(){ $('iframe.twitter-timeline').contents().find('head').append('<link href="(URL)" rel="stylesheet" type="text/css" media="all" />'); } </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/28 16:54
退会済みユーザー
2018/07/28 16:58
2018/07/28 17:06