Сделайте встроенный эскиз Soundcloud печатным с помощью @media print - PullRequest
Новая
       24

Сделайте встроенный эскиз Soundcloud печатным с помощью @media print

0 голосов
/ 24 сентября 2019

При вставке встроенного проигрывателя 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?) чтобы результат печати был похож на то, что отображается на экране, а именно:

enter image description here

1 Ответ

1 голос
/ 25 сентября 2019

Извините, но никакой CSS в вашем домене не повлияет на страницу из другого домена, загруженную в iframe (это из соображений безопасности).

Есть несколько способов для добавления CSSна iframe, использующем JS, но домен 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>
...