Question

我在网站上嵌入推文，我想删除关注按钮以及回复，收藏和转发页脚中的按钮。最小的HTML示例如下

<blockquote class="twitter-tweet">
    <a href="https://twitter.com/StackCareers/statuses/468107750333894656"></a>
</blockquote>
<script src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

通过检查代码，一旦推文被显示，我认为按钮被包裹如下

<a class="follow-button profile" href="https://twitter.com/StackCareers" role="button" data-scribe="component:followbutton" title="Follow StackOverflowCareers on Twitter"><i class="ic-button-bird"></i>Follow</a>

到目前为止，我尝试使用JQuery删除此类

$('.follow-button.profile').remove()

我还尝试通过在样式表中添加以下行来覆盖css：

.follow-button {visibility:hidden;}

在此post之后，我尝试添加此行

.twt-actions { display: none; }

以上都没有奏效。是否有定制这些嵌入式推文的解决方案？

Answer 1

我已设法使用返回widget的{{1}}执行此操作。我读了here您可以从Shadow DOM element操纵CSS。 shadow elements定义了Twitter Widget，在我的情况下，我只嵌入了一条推文，其ID为Shadow element。
所以，我在我的#twitter-widget-0：

中添加了以下内容

CSS

我希望它有用！

Answer 2

这是不可能的。您正在使用同源策略从源中将跨域内容加载到iframe中，这意味着您无法操纵Javascript中的内容。

据我所知，对于没有使用iframe的推文，没有开箱即用的嵌入代码。

您有两种选择。第一个选项是显示提供的推文。第二个选项是use the API to retrieve the tweet，并根据您的需要显示。对于后者，您必须注册API密钥。

或者，您可以找到解决方法here，但我无法保证任何这些建议的实施质量。

Answer 3

如果您有多个小部件

<style>

  [id*="twitter-widget"]::shadow div.Tweet-brand {   display: none;  }

</style>

Answer 4

有多种嵌入推文的方法-根据docs on embedding tweets：

我们的小部件在执行时扫描DOM，根据元素内容将blockquote.twitter-tweet元素转换为完全渲染的嵌入式推文。

要在运行时直接呈现嵌入式Tweet，请使用twttr.widgets.createTweet()函数。

a）通过发布小部件默认

如果您通过this tweet处理publish widget，它将生成以下代码（demo）：

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Nobody:<br><br>Software Marketing Page: "Blazingly Fast"</p>
  &mdash; Kyle Mitofsky (@KyleMitBTV) 
  <a href="https://twitter.com/KyleMitBTV/status/1188837207206977536">October 28, 2019</a>
</blockquote>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

然后，您可以去标识所有已创建的<twitter-widget>元素，并像这样更新其shadowRoot中的所有样式属性：

[...document.getElementsByTagName('twitter-widget')].forEach(tweet => { 
  let style = tweet.shadowRoot.firstElementChild;
  let css = document.createTextNode(`.EmbeddedTweet .CallToAction { display: none; }`);
  style.appendChild(css);
})

但是，我们必须等到窗口小部件处理完每个推文之后，我才能找到一个事件可以利用，该事件使您可以在正确的时间触发此事件（而无需做一些奇怪的setTimeout事情，希望你等了足够长的时间

b）通过JavaScript手动

您可以像这样接管推文的创建：

let tweetId = "1188837207206977536"
let tweetContainer = document.getElementById('tweet-container');
twttr.widgets.createTweet(tweetId, tweetContainer)

这将返回一个承诺，您可以在插入推文后立即进行处理，从而使您可以像这样（demo）在shadowRoot中更新样式：

<div id="tweet-container" class="embedded-tweets"></div>
<script src="https://platform.twitter.com/widgets.js"></script>

<script type="text/javascript">
  let tweetId = "1188837207206977536"
  let tweetContainer = document.getElementById('tweet-container');
  twttr.widgets.createTweet(tweetId, tweetContainer)
       .then(function (tweet) {
         let style = tweet.shadowRoot.firstElementChild;
         let css = document.createTextNode(`.EmbeddedTweet .CallToAction { display: none; }`);
         style.appendChild(css);
       });
</script>

注意：Tweet ID必须为字符串，因为JavaScript中2⁵³ - 1 = 9007199254740991以上的数字将被截断（Number.MAX_SAFE_INTEGER）

关于Shadow DOM的说明

<twitter-widget>是使用web component设置样式的shadow DOM。 Chrome 45和removed in Chrome 63中已弃用使用/deep/或::shadow的全局样式替代。当前，override styles in shadow root的最佳方法是直接在元素的style

中设置一个shadowRoot元素

从嵌入的推文中删除关注按钮

4 个答案:

a）通过发布小部件默认

b）通过JavaScript手动

关于Shadow DOM的说明