Question

我正在尝试使用自己的css修改iframe内的一些div类并更改Twitter Block | 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它不在我自己的代码中。

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

Answer 1

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

在Twitter的情况下，他们documentation关于如何调整Twitter帖子和Feed嵌入的样式。（看起来Twitter将样式限制为暗色或浅色主题，宽度，对齐方式和链接颜色。）

如何设置drupal twitter块？

1 个答案: