如何隐藏嵌入推特时间线的图像？答案

【问题标题】：how to hide images from embed twitter timeline?如何隐藏嵌入推特时间线的图像？
【发布时间】：2014-12-31 02:34:33
【问题描述】：

我什么都试过了。从 CSS 到 jQuery 并取消选中自动展开照片。

这是我的嵌入代码：

  <a class="twitter-timeline"
  href=""
  data-widget-id="" 
  data-chrome="noheader footer noborders noscrollbar transparent" 
  data-tweet-limit="5"
  data-link-color="#6AC829"
  data-border-color="#FFFFFF"
  lang="EN" data-theme="light"
  height="100"
  width="800" 
  data-screen-name=""
  data-show-replies="false"
  data-aria-polite="assertive">
  </a>

这是我的 jQuery 代码：

 ! 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.insertBe fore(js, fjs);
     }
 }(document, "script", "twitter-wjs");

 window.setTimeout(function() {
     $(".twitter-timeline").contents().find(".e-entry-title").css("font-size", "12px");
     $(".twitter-timeline").contents().find(".inline-media").css("display", "none");
     $(".twitter-timeline").contents().find(".tweet").css("font-size", "12px");
     $(".twitter-timeline").contents().find(".p-name.customisable-highlight").css("font-size", "12px");
 }, 1000);

【问题讨论】：

感谢您编辑 satpal！
你能创建一个jsfiddle.net吗？？

标签： jquery css twitter

【解决方案1】：

我相信我有一个解决方案。我已经在所有主流浏览器中进行了测试。抱歉这么晚了。

随着 3 月 3 日的更新，这再次具有相关性。

https://blog.twitter.com/2016/a-new-improved-embedded-timeline

第一步，将时间线包装在一个容器中，例如一个 div。接下来，将此 jQuery 添加到页脚或 jQuery(document).ready();

jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-  widget-0", function() {
  jQuery(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
  jQuery(".twitter-block").css("height", "100%");
});

定位容器，即“.twitter-block”，以及 iframe 的 ID“#twitter-widget-0”。第二行隐藏媒体（图像/视频），第三行调整 iframe 的大小。这应该适用于页面加载，以及在时间轴中进行的任何动态更新。

【讨论】：

【解决方案2】：

兄弟，我找到了这个解决方案，希望对您有所帮助。您必须在样式文件夹中创建 iframe.css 文件，然后在脚本中添加：

      $(document).on('ready', function() {
    $('.t-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
      var cssLink = document.createElement("link") 
      cssLink.href = "/stylesheets/iframe.css"; 
      cssLink.rel = "stylesheet"; 
      cssLink.type = "text/css";

      $(this.contentDocument.documentElement).find("body").append(cssLink);
    });
  })

.t-block 它只是一个容器。

【讨论】：

【解决方案3】：

最后，我设法删除了 Twitter 媒体。

您必须使用 js 创建 Twitter 时间线，详细信息可以参考此链接，https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-factory-functions。
创建 Twitter 时间线后，您可以使用回调函数删除媒体。

这是供您参考的代码，

<div id='tweet-timeline'></div>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>  
<script type="text/javascript">
  twttr.widgets.createTimeline({
    sourceType: 'profile',
    screenName: 'TwitterDev'
  }, document.getElementById('tweet-timeline'), {
    tweetLimit: '1',
    chrome: 'noheader, nofooter, noborders, transparent, noscrollbar',
    related: 'twitterdev,twitterapi'
  }).then(function (el) {
    $("#twitter-widget-0").contents().find(".timeline-Tweet-media").css("display", "none");
    console.log('Embedded a timeline.')
  });
</script>

这里是 jsfiddle，https://jsfiddle.net/4juqoazd/

【讨论】：

【解决方案4】：

如果您在管理工具中取消选中“自动展开照片”框中的复选框，则需要一段时间才能显示更改。您可能想取消选中它，然后等待一两天。

【讨论】：

此复选框已从网站上删除。