Boite de dialogue au chargement d'un iframe

**Rjörm** · 14/08/2018, 12h02

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**eleydet** · 17/08/2018, 09h38

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.

**Rjörm** · 17/08/2018, 11h53

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

**eleydet** · 17/08/2018, 20h58

Bonsoir,

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

index.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Watilin** · 18/08/2018, 16h06

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>&lt;div&gt;</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>

**eleydet** · 19/08/2018, 09h05

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 19/08/2018, 12h16

Bonjour,

1- à tester :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

Il faut donc un "{chemin}" valide.

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

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
sleep ( 5 ); // temporisation de 5 secondes
?>
COUCOU !

Testé sous Chrome, Opera, Edge, Firefox : ça semble OK

Boite de dialogue au chargement d'un iframe

JavaScript

Discussions similaires

Partager

Partager