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？)使打印结果类似于屏幕上显示的结果，即:

Answer 1

抱歉，您域中的任何 CSS 都不会影响从其他域加载到 iframe 的页面(这是出于安全原因)。

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

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

根据评论编辑

没有原生属性可以执行您要求的操作，但您可以使用一点 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>