修改Twitter嵌入推文.EmbeddedTweet高度：CSS文件改后刷新不生效求助

首先得给你点破核心原因：Twitter的嵌入式推文是用跨域iframe加载的！你在本地CSS里写的.EmbeddedTweet { height: 600px; }是作用在你自己的页面上，但推文实际是在一个独立的、属于Twitter域名的iframe里渲染的——浏览器的同源策略会阻止父页面的CSS影响跨域iframe内部的元素。这就是为什么你在开发者工具里直接改iframe里的.EmbeddedTweet能生效（因为你是在iframe的文档环境里改的），但本地CSS完全没反应，哪怕加!important也白搭，你的样式根本没机会应用到那个元素上。

靠谱的解决方法（官方推荐，无风险） #

Twitter其实早就给我们提供了设置推文高度的官方方式，根本不用自己瞎改CSS：

1. 直接给嵌入div加data-height属性

看你提供的示例div，只要在里面加个data-height="600"就行，像这样：

<div class="EmbeddedTweet EmbeddedTweet--edge js-clickToOpenTarget tweet-InformationCircle-widgetParent" 
     data-click-to-open-target="https://twitter.com/username/status/947824196909961216" 
     data-iframe-title="Twitter Tweet"
     data-height="600" <!-- 就加这一行！ -->
     ... 其他原有属性 ...>
</div>

刷新页面后，推文就会自动按照你设置的高度渲染了。

2. 如果是JS动态生成推文，在配置里加height参数

如果你是用Twitter的Widget JS API动态创建推文（比如twttr.widgets.createTweet），直接在配置对象里指定height就行：

twttr.widgets.createTweet(
  '947824196909961216', // 推文ID
  document.getElementById('你的容器ID'), // 要渲染到哪个元素里
  {
    height: 600 // 这里设置高度
  }
);

为啥不推荐硬改CSS？ #

刚才也说了，跨域iframe的内容你根本碰不到，就算你想写JS往iframe里塞样式，浏览器也会因为同源策略阻止你，而且这种自定义操作还可能违反Twitter的开发者条款，搞不好会被限制API访问，得不偿失。

所以乖乖用官方提供的参数就好啦，省心又安全～

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