html - 使用@media print 使嵌入的 Soundcloud 缩略图可打印

Question

在博客上插入嵌入式 Soundcloud 播放器时：

 <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true"></iframe>

使用浏览器的“打印”功能时，它会给出几乎空白的结果。

问题：有没有办法（用@media print？）使打印结果类似于屏幕上显示的结果，即：

标签： htmlcssprintingmedia-queriessoundcloud

Answer 1

抱歉，您域上的 CSS 不会对加载到 iframe 上的其他域的页面产生影响（出于安全原因）。

有一些方法可以使用 JS 在 iframe 上注入 CSS，但是 iframe 的域应该具有适当的CORS规则集，但似乎并非如此。

如果这对您来说真的很重要，您可以随时制作播放器的屏幕截图并用于覆盖实际播放器仅用于打印......</p>

根据评论编辑

没有本地属性可以做你要求的事情，但你可以用一点 JS + CSS 自己做：

document.querySelectorAll('.soundcloud').forEach((iframe) => {
  var img_cover = iframe.getAttribute('cover');
  if (img_cover) {
    var org_html = iframe.outerHTML;
    var new_html = "<div class='soundcloud-iframe'>" +
      org_html +
      "<img src=" + img_cover + " width='500' height='300'>" +
      "</div>";
    iframe.outerHTML = new_html;
  }
});

.soundcloud-iframe img {
  display: none;
}

@media print {
  .soundcloud-iframe iframe {
    display: none;
  }
  .soundcloud-iframe img {
    display: block;
  }
}

<iframe cover="https://i1.sndcdn.com/artworks-000169258529-6odvu9-t500x500.jpg" class="soundcloud" width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true">
</iframe>