2016-08-30 7 views
1

自分のCSSを使ってiframeのdivのクラスを修正しようとしていて、Twitterブロックを変更しようとしています。 Drupal 8の外観。しかし、私は$ is not a functionなど多くのエラーに直面していました。私はjsが(私のjquery.jsの前に)あまりにも速く読み込まれたと思っていましたが、要素を調べて、すべてがうまくいくはずです。 (エラーなしは今)drupal twitterブロックのスタイルを設定するには?

HTML

<iframe id="twitter-widget-0" class="twetter-timeline" > 
    <html> 
    <head></head> 
    <body> 
     <div class="timeline-Viewport"> 
      <ol class="timeline-TweetList"> 
      <li></li> 
      </ol> 
     </div> 
    </body> 
    </html> 
</iframe> 

注:私はそれは私自身のコードではありませんiframe上のコントロールを持っていません。

JS

(function ($, Drupal, drupalSettings) { 
    Drupal.behaviors.yourbehavior = { 
    attach: function (context, settings) { 

     $('iframe').load(function() { 
    $('#twitter-wwidget-0').contents().find("body") 
    .append($("<style type='text/css'> .timeline-Widget{color:red;} </style>")); 
}); 


    } 
    }; 
})(jQuery, Drupal, drupalSettings); 

エラーなしそれが...動作しませんので、私は私が間違ってやっているのか分かりません。

更新: このコードも試しましたが、うまくいきませんでした。

(function($) { 

$(document).ready(function() { 
    console.log('hello'); 
    $('#twitter-widget-0').css('width', '100px'); 
    }); 
}(jQuery)); 
+0

iframeのコンテンツは、あなたのドメインやTwitterのものですか? https://en.wikipedia.org/wiki/Same-origin_policy – ceejayoz

+0

ちょっと@ceejayozそれは私のドメインにあります。尋ねるためのお天気 –

+0

@ceejayozどのアイデア= /? –

答えて

1

CORS(クロスオリジンリソース共有)アクセス制御は、その内容を含む文書とは異なるドメインから供給された場合iframeの内容を変更する(あるいはについて知る)を含むドキュメントを防止します。これを回避するためのメカニズム(postMessageなど)がありますが、iframeの内部と外部の協力が必要です。

Twitterの場合、Twitter投稿と埋め込み埋め込みのスタイルを調整する方法はdocumentationです。 (これは、Twitterがダークまたはライトのテーマ、幅、位置合わせ、およびリンクの色にスタイリングを制限するように見えます)

+1

また、OPは、義務的に、要件を解決またはカバーする方法論を変更する必要があります。 Twitterの[REST API](https://dev.twitter.com/rest/public)を使うことをお勧めします。 – SaidbakR

+0

@sємsєм上記のリンクを見ていきます!自分のドメイン内でもなぜ私が '