gpt4 book ai didi

javascript - 如何设计 drupal twitter block 的样式?

转载 作者:行者123 更新时间:2023-11-27 22:34:41 25 4
gpt4 key购买 nike

我正在尝试使用我自己的 CSS 修改 iframe 内的一些 div 类并更改 Twitter block | Drupal 8 看看。但是,我遇到了很多错误,例如 $ 不是函数 等......我认为我的 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));

最佳答案

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

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

关于javascript - 如何设计 drupal twitter block 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39234249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com