Javascript 新Twitter小部件的iframe CSS覆盖
我正在尝试定制新的Twitter小部件,但是CSS有一些问题,似乎无法在这个新的小部件上覆盖它们。我尝试过寻找解决方案,但找不到任何匹配的解决方案 右导航中的小部件和.timeline类的经过调整的CSS:Javascript 新Twitter小部件的iframe CSS覆盖,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我正在尝试定制新的Twitter小部件,但是CSS有一些问题,似乎无法在这个新的小部件上覆盖它们。我尝试过寻找解决方案,但找不到任何匹配的解决方案 右导航中的小部件和.timeline类的经过调整的CSS: .timeline { margin-bottom:0; border:0 !important; border-radius:0 !important; -webkit-border-radius:0; -moz-border-radius:0; } html: 推特新闻 !函数(d,
.timeline {
margin-bottom:0;
border:0 !important;
border-radius:0 !important;
-webkit-border-radius:0;
-moz-border-radius:0;
}
html:
推特新闻
!函数(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=“//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}(文档,“脚本”,“twitter wjs”);
我已经开始使用!重要声明并尝试覆盖主twitter id,但两者都不起作用
非常感谢您的任何想法
**我显然需要以某种方式编辑iframe,但不确定如何编辑——如果有人更清楚地知道如何使用我的代码(而不是教程)来编辑iframe,那就太好了。我还需要更改iframe宽度。他们创建了一个iframe,因此它是另一个文档 您不能在另一个文档中设置元素的样式,因此除非twitter提供一个钩子将您自己的样式表嵌入到它们的iframe中,否则这是不可能的 推特只允许设计和选择明暗主题
或者,您可以使用创建您自己的小部件,然后可以根据需要对其进行样式设置。如上所述,您不能在不同的源iframe中更改CSS,以下是一些信息:
我用javascript实现了这一点(我在应用程序中使用jQuery!)。您必须在iframe加载之后应用样式(我没有找到有效的“已加载”事件,因此我使用轮询策略)
//自定义twitter提要
var HideWitteRattEmpts=0;
函数hideTwitterBoxElements(){
setTimeout(函数(){
如果($('[id*=twitter]')。长度){
$('[id*=twitter]')。每个(函数(){
if($(this).width()==220){
$(this).width(198);//覆盖220px的最小宽度
}
var ibody=$(this.contents().find('body');
ibody.width($(this.width()+20);//通过添加宽度删除滚动条
if(ibody.find('.timeline.stream.h-feed li.tweet').length){
ibody.find('.timeline').css('border',0);
ibody.find('.timeline.stream').css('overflow-x','hidden');
ibody.find('.timeline.stream').css('overflow-y','scroll');
ibody.find('.timeline标头').hide();
ibody.find('.timeline footer').hide();
}
否则{
$(this.hide();
}
});
}
HideWitteRattEmpts++;
如果(hideTwitterAttempts<3){
hideTwitterBoxElements();
}
}, 1500);
}
//加载html页面后代码中的某个地方
hideTwitterBoxElements();
这对于任何感兴趣的人来说都没有jQuery
更新了更好的解决方案,该解决方案不依赖轮询,因此偶尔也不会出现非样式布局:
twttr.events.bind('rendered',function(){
[].slice.call(document.querySelectorAll('iframe.twitter-timeline')).forEach(function(e,i,a){
var fE = e.contentDocument.getElementsByClassName('timeline-footer');
if(fE.length){
fE[0].style.backgroundColor='transparent';
}
});
});
旧版本:
// Customize twitter feed
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
var list = document.getElementsByTagName('iframe');
if (list.length ) {
Array.prototype.forEach.call(
list,
function(element){
var footerE = element.contentDocument.getElementsByClassName('timeline-footer')[0];
footerE.style.backgroundColor="transparent";
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
hideTwitterBoxElements();
//自定义twitter提要
var HideWitteRattEmpts=0;
函数hideTwitterBoxElements(){
setTimeout(函数(){
var list=document.getElementsByTagName('iframe');
if(list.length){
Array.prototype.forEach.call(
列表
函数(元素){
var footerE=element.contentDocument.getElementsByClassName('timeline-footer')[0];
footerE.style.backgroundColor=“透明”;
});
}
HideWitteRattEmpts++;
如果(hideWitteRattEmpts<3){
hideTwitterBoxElements();
}
}, 1500);
}
hideTwitterBoxElements();
我不知道当时问这个问题时是否可行,但现在可以了,请检查:
我改编了@Sebastiaan Ordelman的代码并添加了一些注释(参考旧API中的值)。这是我试图在短时间内匹配旧API的尝试。将此代码放在新twitter小部件的新复制粘贴代码之后
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
if ( $('[id*=twitter]').length ) {
$('[id*=twitter]').each( function(){
var ibody = $(this).contents().find( 'body' );
if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
ibody.find( '.customisable-border' ).css( 'border', 0 );
ibody.find( '.timeline' ).css( 'background-color', '#004A7B' ); //theme: shell: background:
ibody.find( 'ol.h-feed' ).css( 'background-color', '#0575A1' ); //theme: tweets: background:
ibody.find( 'ol.h-feed' ).css( 'border-radius', '5px 5px 5px 5px' );
ibody.find( 'li.tweet' ).css( 'border-bottom', '1px dotted #FFFFFF' ); //theme: tweets: color:
ibody.find( 'li.tweet' ).css( 'color', '#FFFFFF' ); //theme: tweets: color:
ibody.find( '.customisable:link' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.footer' ).css( 'visibility', 'hidden' ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'min-height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.avatar' ).css( 'height', 0 ); //hide avatar
ibody.find( '.avatar' ).css( 'width', 0 ); //hide avatar
ibody.find( '.p-nickname' ).css( 'font-size', 0 ); //hide @name of tweet
ibody.find( '.p-nickname' ).css( 'visibility', 'hidden' ); //hide @name of tweet
ibody.find( '.e-entry-content' ).css( 'margin', '-25px 0px 0px 0px' ); //move tweet up (over @name of tweet)
ibody.find( '.dt-updated' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.full-name' ).css( 'margin', '0px 0px 0px -35px' ); //move name of tweet to left (over avatar)
ibody.find( 'h1.summary' ).replaceWith( '<h1 class="summary"><a class="customisable-highlight" title="Tweets from fundSchedule" href="https://twitter.com/fundschedule" style="color: #FFFFFF;">fundSchedule</a></h1>' ); //replace Tweets text at top
ibody.find( '.p-name' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
}
else {
$(this).hide();
}
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
</script>
var HideWitteRattEmpts=0;
函数hideTwitterBoxElements(){
setTimeout(函数(){
如果($('[id*=twitter]')。长度){
$('[id*=twitter]')。每个(函数(){
var ibody=$(this.contents().find('body');
if(ibody.find('.timeline.stream.h-feed li.tweet').length){
ibody.find('.customizable border').css('border',0);
ibody.find('.timeline').css('background
// Customize twitter feed
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
var list = document.getElementsByTagName('iframe');
if (list.length ) {
Array.prototype.forEach.call(
list,
function(element){
var footerE = element.contentDocument.getElementsByClassName('timeline-footer')[0];
footerE.style.backgroundColor="transparent";
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
hideTwitterBoxElements();
<a class="twitter-timeline" data-chrome="nofooter" ....">Tweets</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
if ( $('[id*=twitter]').length ) {
$('[id*=twitter]').each( function(){
var ibody = $(this).contents().find( 'body' );
if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
ibody.find( '.customisable-border' ).css( 'border', 0 );
ibody.find( '.timeline' ).css( 'background-color', '#004A7B' ); //theme: shell: background:
ibody.find( 'ol.h-feed' ).css( 'background-color', '#0575A1' ); //theme: tweets: background:
ibody.find( 'ol.h-feed' ).css( 'border-radius', '5px 5px 5px 5px' );
ibody.find( 'li.tweet' ).css( 'border-bottom', '1px dotted #FFFFFF' ); //theme: tweets: color:
ibody.find( 'li.tweet' ).css( 'color', '#FFFFFF' ); //theme: tweets: color:
ibody.find( '.customisable:link' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.footer' ).css( 'visibility', 'hidden' ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'min-height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.avatar' ).css( 'height', 0 ); //hide avatar
ibody.find( '.avatar' ).css( 'width', 0 ); //hide avatar
ibody.find( '.p-nickname' ).css( 'font-size', 0 ); //hide @name of tweet
ibody.find( '.p-nickname' ).css( 'visibility', 'hidden' ); //hide @name of tweet
ibody.find( '.e-entry-content' ).css( 'margin', '-25px 0px 0px 0px' ); //move tweet up (over @name of tweet)
ibody.find( '.dt-updated' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.full-name' ).css( 'margin', '0px 0px 0px -35px' ); //move name of tweet to left (over avatar)
ibody.find( 'h1.summary' ).replaceWith( '<h1 class="summary"><a class="customisable-highlight" title="Tweets from fundSchedule" href="https://twitter.com/fundschedule" style="color: #FFFFFF;">fundSchedule</a></h1>' ); //replace Tweets text at top
ibody.find( '.p-name' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
}
else {
$(this).hide();
}
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
</script>
<a class="twitter-timeline" href="https://twitter.com/twitterapi"
data-widget-id="YOUR-WIDGET-ID-HERE"
data-theme="dark"
data-chrome="noheader nofooter noborders noscrollbar transparent"
data-link-color="#cc0000"
width="200"
height="300"
>Tweets by @twitterapi</a>
<script>window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));</script>
twttr.ready( function(twttr){
twttr.events.bind("rendered", function(tw_event){
var tw_iframe = ev.target;
//the following is custom jquery code to do various
//css overrides based on selectors
var twitterbody = $(tw_iframe).contents().find( 'body' );
twitterbody.find(".avatar").hide();
twitterbody.find("li.tweet").css({padding: "2px"});
});
});