Imprimer iFrame uniquement lorsque le CSS est complètement chargé

Question

J'imprime des parties sélectionnées de pages en les plaçant dans un iframe vide. Tout va bien, sauf le CSS. Parfois il est là, parfois non, donc je suppose que la fonction d'impression est chargée dans la plupart des cas avant que le CSS soit complet. Malheureusement, je ne suis pas en mesure de résoudre le problème. Le code de base :

var pStyles = new String ("<link href="stackoverflow.com/css/print.css' rel='stylesheet' type='text/css' id='cssprint' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
    console.log(window.frames["printhelper"].document.body.innerHTML);
    window.frames["printhelper"].window.focus();
    window.frames["printhelper"].window.print();
}

Cela fonctionne, mais avec le problème CSS décrit. Pour être sûr que le CSS est chargé, j'ai fini par utiliser la fonction modifiée, qui ne fonctionne pas du tout :

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
    console.log(window.frames["printhelper"].document.body.innerHTML);
    $(#cssprint).on('load', function() {
        console.log ('CSS loaded');
        window.frames["printhelper"].window.focus();
        window.frames["printhelper"].window.print();
    }, 0);
}

cssprint semble ne jamais être chargé, donc console.log reste vide et aucune impression n'est effectuée. Mais qu'est-ce que je fais de mal ? (La fonction printFrame est appelée par un simple onClick dans le balisage HTML).

Answer 1

Je ferais probablement quelque chose comme ça :

• Ajouter onload à CSS link qui appelle une fonction qui affiche un message dans la fenêtre parent ( parent.postMessage(...) ) ou le fait directement, alors vous n'avez pas besoin d'une balise supplémentaire script.
• La fenêtre extérieure écoute le message message de la fenêtre iframe et commence à imprimer dès sa réception.

Vous pouvez également ignorer l'affichage du message si vous n'avez pas besoin de synchroniser quoi que ce soit avec la fenêtre parent et vous contenter d'imprimer directement dans l'événement onload :

<link onload="window.print()" ...>

Voir MDN pour plus d'informations sur publier et recevoir des messages .

Answer 2

La fonction de travail complète (merci à H. B.) :

var pStyles = new String ("<link href='http://stackoverflow.com/css/print.css' rel='stylesheet' type='text/css' onload='window.focus(); window.print()' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
}