如何设置 drupal twitter 块的样式？答案

【问题标题】：How to style drupal twitter block?如何设置 drupal twitter 块的样式？
【发布时间】：2016-08-30 18:03:53
【问题描述】：

我正在尝试使用我自己的 css 修改 iframe 中的一些 div 类并更改 Twitter 块 | Drupal 8 外观。但是，我遇到了很多错误，例如$ is not a function 等....我认为我的js 加载得太快（在我的jquery.js 之前），但是，我检查了元素并且一切都应该工作. （现在没有错误）

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，它不在我自己的代码中。

  (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));

【问题讨论】：

iframe 的内容是在您的域上，还是在 Twitter 上？ en.wikipedia.org/wiki/Same-origin_policy
嘿@ceejayoz 它在我的域中..感谢询问
@ceejayoz 任何想法 =/？
您的代码看起来很干净，但您可以尝试将代码中的$ 替换为jQuery。
@kisanme 你的意思是我上一个函数？我的意思是我的最后一次更新？

标签： javascript jquery drupal-8

【解决方案1】：

CORS（跨域资源共享）访问控制防止包含文档修改（甚至知道）iframe 的内容，如果其内容来自与包含文档不同的域。有一些机制（例如postMessage）可以解决这个问题，但它们需要iframe内部和外部的合作。

就 Twitter 而言，他们有 documentation 关于如何调整 Twitter 帖子和提要嵌入的样式。（看起来 Twitter 将样式限制为深色或浅色主题、宽度、对齐方式和链接颜色。）

【讨论】：

OP 还应该强制改变解决或覆盖需求的方法。我建议使用推特的REST APIs。
@sємsєм 我会看看上面的链接！但我真的很想知道为什么即使在我自己的域中我也无法点击<iframe>。
@ArielMaduro 真的是同一个域（以及端口和协议）吗？ www.example.com 和 example.com 被视为不同的域。如果它们确实是同一个域，则 $($('iframe')[0].contentWindow.document) 之类的东西应该让您将 iframe 中的文档作为 jQuery 对象。（jQuery 不能自己跳过边界。）$('#someId', $('iframe')[0].contentWindow.document) 之类的东西应该通过 ID 为您提供相对于 iframe'd 文档的特定元素。
@Ouroborus 你认为还有另一种方法可以水平获取 Twitter 提要吗？？？
@ArielMaduro 我想有几种方法。将它们集成到 Drupal 中可能是任务中具有挑战性的部分。