Ajouter du Javascript sur un iframe PDFJS

**RookFrank** · 21/04/2014, 12h09

Bonjours,

J'utilise PDFJS dans mon appli web pour afficher des pdf.
Je cherche le moyen de faire référence aux éléments qui sont dans l'iframe de PDFJS.

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
$viewerJsPath = 'path/pdfjs/web/viewer.html';
$urlDocPDF = 'path/vers/monpdf.pdf';
 
<iframe id="iframePDFJS" src="'.$viewerJsPath.'?file='.$urlDocPDF.'">
	<!DOCTYPE html>
	<html moznomarginboxes="" mozdisallowselectionprint="" dir="ltr">
		<body tabindex="1">
			<div id="outerContainer" class="">
				<div id="sidebarContainer">
					<div id="mainContainer">
                                                <!-- C'est cette div qui m’intéresse -->
                                                <div class="toolbar"></div>
 					</div>
				 </div>
			 </div>
 		</body>
 	</html>
</iframe>

J'ai tenté ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var maPage = $(this) ;
var iframePDFJS = maPage.find("#iframePDFJS");
var iframePDFJScontents = iframePDFJS.contents();
 
//Essai 1
pdfViewerToolBar = iframePDFJScontents.find('.toolbar');
 
//Essai 2
$(iframePDFJScontents).ready(function(){
    var pdfViewerToolBar = iframePDFJScontents.find('.toolbar');
}
 
//Essai 3
pdfViewerToolBar = iframePDFJScontents.get(0).find('.toolbar');

Je ne parviens pas à accéder aux div dans l'iframe car apparentement elles n'existent pas.
J'imagine que c'est dû au fait que lorsque mon js est chargé l'iframe lui, n'a pas encore chargé les données du pdf .
Donc mon js ne peu pas trouver de contenu dans l'iframe.

Est ce que quelqu'un saurait comment gérer cette situation.

Je ne suis pas certain que mon explication soit compréhensible, n'hésiter à me poser des questions.
Bonne journée et merci d'avance pour votre attention.

**Bovino** · 21/04/2014, 12h15

Ce n'est pas comme ça que fonctionne une iframe...
Le contenu HTML de la balise n'est destiné qu'aux navigateurs ne reconnaissant pas la balise pour afficher un contenu alternatif. Il n'est donc pas affiché par les autres navigateurs et ne doit pas contenir de page HTML complète.
Du coup, le contenu d'une iframe, à condition de respecter la Same Origin Policy, s'obtient avec contentWindow ou contentDocument.

**sekaijin** · 21/04/2014, 12h43

On peut envisager de travailler dans l'autre sens

une iframe se comporte comme une fenêtre dans l'iframe il est donc possible d'accéder à la page principale via la propriété .opener

tu peux donc mettre ton code dans l'iframe et depuis celle-ci référencé des éléments dans la page principale.

en faisant ça sur l'événement onload de l'iframe tu est sur que le contenu de l'iframe existe.

A+JYT

**RookFrank** · 21/04/2014, 15h04

Merci pour c'est réponses rapides.

Voilà tous mes essais :

Code :

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

1
2
3
4
5
6
7
$( "#iframePDFJS" ).contents():
$( "#iframePDFJS" ).get(0).contentWindow ;
$( "#iframePDFJS" ).get(0).contentDocument ;
$( "#iframePDFJS" ).contentWindow ;
$( "#iframePDFJS" ).contentDocument ;
document.getElementById("iframePDFJS").contentWindow;
document.getElementById("iframePDFJS").contentDocument;

J'ai eu pour résultats des about:blank, undefined et null.

Cependant j'ai trouvé ceci:

J'ai essayé de substituer le bouton impression de ma page au bouton d'impression du Viewer PDFJS.
Mon bouton a la class printButton .Le bouton du viewer a les class toolbarButton et print

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function init() {
        //Ici la toolbar est undefined
	console.log($( "#iframePDFJS" ).contents().find('.toolbar'));
        var printButton = pageprintDocument.find(".printButton");
	printButton.click(function () {
                //Ici On trouve la toolbar
		console.log($( "#iframePDFJS" ).contents().find('.toolbar'));
		var toolbarPrintButton = $( "#iframePDFJS" ).contents().find('.toolbarButton.print');
		toolbarPrintButton.click();
        });
}

Ça fonctionne.

Je penses que ça marche parce qu'au moment où je click sur mon bouton .printButton l'iframe à put charger le pdf et l'interface.
Comment puis je contrôler que l'iframe ai bien fini de charger le pdf avant de lui appliquer du Js ?

J'aimerais autant ne pas toucher directement à PDF.js.

**sekaijin** · 21/04/2014, 15h47

comme je le dis dans le contenu de l'iframe tu peux mettre un js qui accède à la page mère

ce js peux faire ce qu'il veut par exemple positionner une variable qui indique si c'est ok ou pas

A+JYT

**RookFrank** · 22/04/2014, 08h33

J'ai fini par suivre ton conseil et j'ai ajouter du js au contenu de mon iframe.
Ça fonctionne

Merci pour votre aide.

Ajouter du Javascript sur un iframe PDFJS

JavaScript

Discussions similaires

Partager

Partager