Activez le réglage automatique de la hauteur de l'iframe

J'ai une iframe avec un fichier pdf:

<iframe src="pdf/sample.pdf"></iframe>

Comment mettre que l'iframe est de la même hauteur que le fichier pdf, sans les barres de défilement?

stackoverflow.com/questions/247128/how-to-auto-size-an-iframe, stackoverflow.com/questions/153152/...

InformationsquelleAutor Daniel Koczuła | 2012-11-04

2

Si vous souhaitez afficher le fichier PDF sans les barres de défilement, vous pouvez le faire en passant des paramètres dans l'URL. Adobe a documenté ici:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

Essayez ceci:
```
<iframe src="pdf/sample.pdf#view=fit"></iframe>
```
Vous n'êtes pas exactement réglage de la hauteur de l'iframe pour s'adapter au format PDF, mais il est probablement le plus robuste de la solution, car il est indépendant du navigateur et ne nécessite pas de JavaScript.

Voici une mise à jour après le commentaire de Daniel.

J'ai créé un test HTML comme suit:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Untitled Page</title>
</head>
<body>
   <iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
      width="300px" height="400px"></iframe>
</body>
</html>
```
C'est à quoi il ressemble dans Chrome:

C'est comme prévu.

Noter que j'ai aussi désactivé la barre d'outils et la navpane donc il ya de la place pour la page.
- J'ai essayé cela, mais cela ne fonctionne pas.
- Voir mise à jour.
- Oui, mais Vous avez défini le hauteur de à 400, et je souhaite que le pdf s'affiche dans l'iframe sans la barre de défilement. Donc, quand je vais pour afficher le pdf que j'ai faites défiler l'écran avec la barre de défilement du navigateur. Maintenant, vous comprenez ce que je veux dire?
- La barre de défilement vous voyez n'est pas que de l'iFrame, mais celui de la visionneuse de PDF. Il vous permet de faire défiler les pages suivantes. Je suis tout à fait sûr que cela peut être résolu par la définition de la mise en page sur une seule page ou alors en utilisant les paramètres de l'URL. J'ai fourni un lien vers la référence.
- mais je pense que c'est le point. Nous avons besoin d'un moyen d'obtenir le PDF de la vue à une telle hauteur dans les DOM ainsi que le PDF de la vue elle-même n'a pas de barre de défilement. Vous allez ensuite sur la page HTML elle-même pour afficher les autres pages, ce qui serait déjà montré hors de l'écran (au lieu de caché à l'intérieur de la vue PDF). La question est plus pertinente pour la PDF dans iframes plus précisément, par opposition à iframes général
- Ce serait vous obliger à calculer la somme de tous les page hauteurs (en plus de la page d'espacement). Je ne suis pas au courant d'une méthode pour y parvenir.
InformationsquelleAutor Frank Rem
0

Vous pouvez le faire simplement à l'aide de la méthode que j'ai expliqué sur mon facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364

Avez-vous une IFrame, lequel vous souhaitez définir automatiquement la hauteur de l'parce que vous êtes l'hôte d'une page d'un autre site dans le vôtre.

Eh bien, malheureusement, l'IFrame ne peut pas prendre la hauteur du contenu que vous chargez et, sauf si vous placez une hauteur, il va montrer soit la hauteur par défaut, ou non hauteur à tous. C'est gênant.

J'ai la solution pour vous, ça ne marchera que sur les récentes standard, de soutenir les navigateurs, mais aussi des œuvres dans IE8 trop, donc pour environ 99% d'entre vous c'est parfait.

Le seul problème est que vous devez insérer un code javascript à l'intérieur de l'iframe, ce qui est facile si le contenu que vous chargez vous appartient, vous pouvez simplement ouvrir le contenu que vous êtes en train de charger et de mettre le code javascript dans le contenu.

Dans votre site web, vous avez besoin d'un morceau de code javascript qui peut "recevoir un message de l'IFrame", à l'instar de ce
```
jQuery(document).ready(function(){
    jQuery(window).bind("message",function(e){
        data = e.data || e.originalEvent.data;
        jQuery("iframe.newsletter_view").height(data.height);
    });
});
```
dans votre IFrame contenu, ajoutez ceci à la fin, probablement que c'est ok pour simplement faire quelque chose comme "$modèle.$javascript" à l'aide de PHP ou de quelque chose, même si le javascript n'est pas à l'intérieur de la balise
```
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    parent.postMessage({
        height:$(document.body).height()+50+"px"
    },"*");
});
</script>
```
Évidemment, je suis à l'aide de jquery, vous n'en avez pas, c'est juste plus facile et probablement que vous l'utilisez, afin de vous épargner les tracas.

si vous faites cela, quand l'iframe charges, il va envoyer un signal de retour à la fenêtre parent, qui va redimensionner l'iframe en fonction de la longueur du contenu 🙂

Je suis sûr que vous pouvez comprendre comment modifier le peu de choses, mais c'est la méthode que je suis en utilisant
- alternativement, vous pouvez ouvrir le contenu et juste après le javascript dans le fond de ce que vous voulez afficher dans l'iframe, j'aurais dû faire ce clair, mais après la lecture de ma réponse, je me rends compte que je n'ai pas dit que exactement.
InformationsquelleAutor Christopher Thomas

Ma solution

$(document).ready(function(){
  var width = $(window).width();
  var height = $(window).height();

  $('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});

<object data="myFile.pdf" type="application/pdf" id="objFile"></object>

InformationsquelleAutor Danny Angelus

Vous devez vous connecter pour publier un commentaire.