使用 @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？）使打印结果与屏幕上显示的结果相似，即：

Answer 1

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

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

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

基于 cmets 编辑

没有原生属性来做你要求的事情，但你可以用一点 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>