如何覆盖嵌入式Twitter推文的CSS样式？附可行脚本

• 最初尝试用常规CSS修改嵌入式单条Twitter推文样式，未生效
• 转而使用Twitter的JavaScript事件API，但一开始无法定位推文内的元素
• 查找的解决方案大多针对Twitter时间线，而非单条嵌入式推文

你找对路子啦——因为嵌入式推文是放在iframe里的，常规CSS受同源策略限制没法直接生效，必须等推文渲染完成后再通过JS操作内部DOM。这里是你调试后的可行脚本，我帮你规整了格式：

twttr.ready(function(twttr){ 
  twttr.events.bind('rendered', function(event) { 
    var tgt = event.target; 
    $(tgt).contents().find(".EmbeddedTweet").css({ 
      "border":"2px solid black", 
      "border-radius":"7px", 
      "max-width":"100%" 
    }); 
  }); 
});

为什么这个方法能work？ #

• twttr.ready()保证我们在Twitter的JS SDK完全加载后再绑定事件，避免提前操作导致的错误
• rendered事件会在每条推文渲染完成时触发，这时event.target就是对应推文的iframe元素
• 通过.contents()可以合法访问iframe内部的DOM（推特的嵌入式推文iframe和主页面同域，允许这种操作），再通过.find(".EmbeddedTweet")定位到推文容器，就能自由添加自定义样式了

如果要修改推文内的其他元素（比如文字颜色、背景色），只需要调整.find()里的选择器和对应的CSS属性就可以~

内容的提问来源于stack exchange，提问作者Malcom