Изменение внешнего вида виджета Twitter на лету

Question

Изменение внешнего вида виджета Twitter на лету

0

У меня есть следующий код в моем документе:

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

Xeos 04 дек. 2013, в 22:03

Источник

Теги:

javascript

jquery

css

twitter

2 ответа

1

Вы можете стилизовать элементы в виджетах Twitter iframe с помощью JavaScript.

Во-первых, вам нужен активный документ в контексте вложенного просмотра 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

smockle 04 дек. 2013, в 19:05

0

К сожалению, это вызывает ошибку SecurityError, поскольку таблица стилей находится в другом домене.
Xeos 04 дек. 2013, в 21:20
0

@Xeos Какой браузер вы используете? Виджет на этой странице отображает черный заголовок?
smockle 04 дек. 2013, в 21:38
0

Да уж. Я использую FF25. Я нашел "решение" ...
Xeos 04 дек. 2013, в 21:49
0

MDN также предупреждает о SecurityError: developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
Xeos 04 дек. 2013, в 21:50

Показать ещё 2 комментария

Ещё вопросы

К сожалению, это вызывает ошибку SecurityError, поскольку таблица стилей находится в другом домене.
@Xeos Какой браузер вы используете? Виджет на этой странице отображает черный заголовок?
Да уж. Я использую FF25. Я нашел "решение" ...
MDN также предупреждает о SecurityError: developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Xeos · Accepted Answer · 2013-12-04T19-20-00.000Z

Нет прямого способа сделать это, поэтому я решил привнести другую зависимость, которая будет задерживать событие 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();