Question

我的文档中包含以下代码：

<a class="twitter-widget" href="url" data-widget-id="138843679974442730">Twitter Timeline</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

data-widget-id与一种风格相关联。现在如果网站上有主题更改（我替换所有负责的样式表和图片），除了Twitter小部件之外，一切都会发生变化。

由于小部件本身是一个iframe，我无法更改附加到它的任何样式表。

是否有一种简单的方法可以在不重新加载的情况下更改窗口小部件的样式（删除标记，创建标记，运行js）？

Answer 1

您可以使用JavaScript在Twitter小部件iframe中设置元素样式。

首先，您需要iframe的嵌套浏览上下文中的活动文档：

var doc = document.getElementById("twitter-widget-0").contentDocument;

然后，您可以应用样式（例如）：

doc.querySelector(".timeline-header").style["background-color"] = "black";
doc.querySelector(".timeline-header a").style["color"] = "white";

示例：http://codepen.io/smockle/pen/IJHnj

Answer 2

没有直接的方法可以做到这一点，所以我决定引入另一个将延迟onload事件的依赖。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

以下是完成这项工作的代码：

var twitterBox = document.getElementsByClassName("twitterBox");
if (!twitterBox || twitterBox.length == 0) { return true; }
var twitterTimeline = document.createElement('a');
twitterTimeline.className = 'twitter-timeline';
twitterTimeline.href = 'url';
twitterTimeline.innerHTML = 'Twitter Timeline';
twitterTimeline.setAttribute('data-widget-id', '388742673974046720');
twitterBox[0].removeAttribute('data-twttr-id');
twitterBox[0].innerHTML = '';
twitterBox[0].appendChild(twitterTimeline);
twttr.widgets.load();

即时更改Twitter Widget外观

2 个答案: