使用 @media print 使嵌入式 Soundcloud 缩略图可打印

Posted 2023-03-06

【中文标题】使用 @media print 使嵌入式 Soundcloud 缩略图可打印

【英文标题】：Make embedded Soundcloud thumbnail printable with @media print

【发布时间】：2020-01-25 00:36:05

【问题描述】：

在博客上插入嵌入式 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？）使打印结果与屏幕上显示的结果相似，即：

【参考方案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"   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>

【讨论】：

感谢您的回答。有没有办法自动做到这一点？像<iframe ... alt-img-for-print="soundcloud.com/api/thumbnail/track/271188615"> 这样的东西？ （这当然是伪代码）