Boite de dialogue au chargement d'un iframe

Version imprimable

Bonjour
j'affiche une boite de dialogue d'impression au moment où je charge mon iframe
sauf que même sans l'iframe, j'ai la boite de dialogue qui s'ouvre
comment je peux faire le contrôle svp ?
Code:

1 2 3 4 5 6 7 8 <script language="javascript" type="text/javascript"> function isLoaded() { var pdfFrame = window.frames['pdf']; pdfFrame.focus(); pdfFrame.print(); } </script>
Code:

1 2 <iframe onload="isLoaded()" name="pdf" id="pdf" src="{chemin}" width="900" height="900" align="middle"></iframe>

17/08/2018, 09h38
eleydet

Bonjour,

Je viens de tester votre code, avec Firefox :
- Si la page chargée dans l'iframe existe, le code fonctionne normalement et la boîte de dialogue s'affiche.
- Si la page chargée dans l'iframe n'existe pas, le message "Fichier introuvable" est affiché dans l'iframe, la boîte de dialogue ne s'affiche pas.
17/08/2018, 11h53
Rjörm

salut
chez moi sur firefox 60, cela ne fonctionne pas du tout, pas de boite de dialogue dans tout les cas
sur chrome, j'ai la boite de dialogue même quand l'iframe est vide :roll:

Bonsoir,

Si cela peut aider, voici mes fichiers de test...

index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function isLoaded() {
        var pdfFrame = window.frames['pdf'];
        pdfFrame.focus();
        pdfFrame.print();       
      }
    </script>
  </head>
  <body>
    <iframe onload="isLoaded()" name="pdf" id="pdf" src="test.html" width="500" height="400" align="middle"></iframe>
  </body>
</html>

test.html :

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Bla bla...
  </body>
</html>

Il y a un problème qui n’a pas encore été soulevé il me semble, celui de la différence d’origine. Si la page mère et la page incluse n’ont pas la même origine, le JavaScript de la page mère ne peut pas manipuler la page incluse, et cela inclut la commande print.

Ça me paraît plus cohérent d’appeler print dans le code de la page incluse, si c’est possible.

Si ce n’est pas possible, il y a peut-être moyen de tricher en imprimant la page mère :

masquer tous les éléments sauf l’iframe ;
mettre l’iframe aux dimensions nécessaires (???) ;
imprimer la page mère.

Avec cette méthode, le principal problème est de choisir les dimensions de l’iframe. Si le contenu fait moins d’une page ça fonctionne, mais avec plusieurs pages, malgré différents tests je n’ai pas réussi.
Voici mon code de test :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Imprimer une iframe ?</title> <style media="screen"> #joli { border: solid 2px #7a4; background: #cf9; text-align: center; width: 500px; padding: 100px 0; margin: 1rem 0; } </style> <style media="print"> @page { size: A4; margin: 0.4cm; /* bleed: 100%; */ } html, body { margin: 0; padding: 0; border: none; width: 100%; height: 100%; overflow: hidden; } /* tentative d’imprimer 4 pages, mais ça ne marche pas */ /* html, iframe { */ body, iframe { height: 400%; } body > * { display: none !important; } iframe { display: block !important; position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 0; border: none; } </style> </head> <body> <button type="button">Charger une iframe</button> <div id="joli">Une <code><div></code> pour faire joli</div> <script> "use strict"; let $button = document.querySelector("button"); $button.addEventListener("click", () => { $button.disabled = true; let $iframe = document.createElement("iframe"); $iframe.width = 500; $iframe.height = 400; $iframe.onload = () => { let $p = document.createElement("p"); $p.append("Utilisez la commande « Aperçu avant impression » ;)"); document.body.append($p); }; $iframe.src = "https://www.developpez.net/forums/"; document.body.append($iframe); }); </script> </body> </html>

Bonjour,

Je n'ai pas vraiment compris ce que recherche Rjörm... Dans le cas d'une différence d'origine, la solution de Watilin, consistant à masquer tous les éléments sauf l’iframe me semble une solution un peu lourde. Une autre solution, peut-être?

index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function isLoaded() {
        fenetre_impression=window.open("impression.html", "identifiant", "width=500,height=400");
        fenetre_impression.print();
      }
    </script>
  </head>
  <body>
    <input type="button" value="ok" onclick="isLoaded();">
  </body>
</html>

impression.html :

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <iframe name="pdf" id="pdf" src="https://www.developpez.net/forums/" width="500" height="400" align="middle"></iframe>
  </body>
</html>

Bonjour,

1- à tester :

Code:

<iframe onload="isLoaded(this);" name="pdf" id="pdf" src="{chemin}" width="900" height="400" align="middle"></iframe>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script> function isLoaded( frameObj ) { // on récupère le contenu var frameContent = frameObj.contentWindow.document.body.innerHTML; if( frameContent != '' ) { alert( 'iframe chargée'); // (en TEST) var frameName = frameObj.name; var theFrame = window.frames[frameName]; theFrame.focus(); theFrame.print(); } } </script>
L'"astuce" consiste à vérifier si du contenu existe dans l'iframe.
Attention : même "Page Not Found" est du contenu ! :aie:
Il faut donc un "{chemin}" valide.

2- Comme le souligne Watilin, en cas d'une différence d'origine, on obtient une erreur :

Citation:

SecurityError: Permission denied to access property "document" on cross-origin object

3- Si le "{chemin}" a la même origine, ça devrait fonctionner.

4- Pour mes tests, j'ai simulé un chargement "long" (5 secondes) avec :
Code:

1 2 3 4 <?php sleep ( 5 ); // temporisation de 5 secondes ?> COUCOU !
Testé sous Chrome, Opera, Edge, Firefox : ça semble OK