Je travaille sur un système de résolution de cas et je suis actuellement en utilisant une boîte de coloris JQuery pour afficher une liste de tâches ouvertes à l'utilisateur. Les utilisateurs veulent pouvoir imprimer cette liste et, je suppose que vous pouvez le faire à partir de la page elle-même en ajoutant un lien JavaScript qui déclenche la fenêtre. Imprimer à partir de l'iframe. Cependant, je dois également tenir compte des utilisateurs éventuellement sélectionnant Imprimer dans le menu du navigateur. Dans ce cas, si la coloration est ouverte, je veux simplement imprimer son contenu et non la page sus-jacente.
est-il possible de tout cacher à l'exception du contenu iframed à l'aide d'un fichier de supports d'impression CSS? Si oui, comment cela peut-il être atteint? À défaut, j'aurai besoin de recourir à JavaScript, alors réaliserait l'effet de JavaScript?
4 Réponses :
Cela pourrait fonctionner si l'iframe est un enfant direct de corps
Du test rapide, cela n'a pas fonctionné, le "*" a prié la priorité, je vais mettre des JS rapides que j'ai écrites.
(* iframe) et peaufiner la largeur / hauteur de l'iframe pour un résultat maximum;)
@Shadowwizard ! Important est toujours une option.
Si la solution pure CSS échouera (ne pas avoir travaillé pour moi, mais peut-être que je viens de manquer quelque chose), vous pouvez avoir une solution combinée de CSS et JavaScript. D'abord, ont ceci:
<script type="text/javascript">
window.onbeforeprint = function WindowPrint(evt) {
for (var i = 0; i < document.body.childNodes.length; i++) {
var curNode = document.body.childNodes[i];
if (typeof curNode.className != "undefined") {
var curClassName = curNode.className || "";
if (curClassName.indexOf("hideonprint") < 0) {
var newClassName = "";
if (curClassName.length > 0)
newClassName += curClassName + " ";
newClassName += "hideonprint";
curNode.setAttribute("original_class", curClassName);
curNode.className = newClassName;
}
}
}
document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class");
}
</script>
J'ai trouvé une méthode qui fonctionne pour imprimer uniquement le contenu de l'iframe, même si le client utilise l'élément de menu d'impression du navigateur, mais je ne pouvais pas vous dire pourquoi c'est. L'astuce consiste à mettre l'accent sur l'iframe avant l'impression. La feuille de style d'impression est également nécessaire, bien que le JavaScript semble être ce qui se passe lorsque l'utilisateur s'imprime dans le menu. Vous avez besoin des deux parties pour que cela fonctionne. Il imprime l'ensemble du document, même s'il est plus grand que l'iframe! Je l'ai testé avec succès dans IE8, Firefox 5 et 6 et safari 3.2.
J'utilise ce script comme gestionnaire pour un événement OnClick pour un bouton ou "Imprimer moi" Link: P>
<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" />
@charset "utf-8";
/* CSS Document */
body { background:none; }
#left { display:none; }
#main img { display:none; }
#banner
{
display:none;
margin-top:0px;
padding:0px;
}
#main
{
margin-top:0px;
padding:0px;
}
#print_iframe
{
display:none;
}
// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe>
// this is how you do it using jquery:
$("#print-iframe").get(0).contentWindow.print();
// and this is how you do it using native javascript:
document.getElementById("print-iframe").contentWindow.print();
En fin de compte, je suis arrivé à la conclusion que l'IFrame était plus de problèmes que ce qu'il valait. Je suis plutôt en utilisant Colorbox en mode DIV et ajouter une certaine logique à la page en cours de récupération qui détermine s'il doit rendre une page HTML totale ou simplement les données qui m'intéressent. Styling La page à imprimer avec la Div était beaucoup moins problématique. qu'avec l'iframe
Dupliqué possible de Contenu d'impression d'une iframe créée de manière dynamique de parent fenêtre