Chrome et Firefox ne sont pas afficher la plupart des documents PDF dans un iframe

Je suis sous Windows 7, 64 bits. J'ai récemment mis à jour mon OS pour installer les dernières mises à jour. Depuis lors, la plupart des documents PDF ont arrêté rendu dans mon programme. Mon programme se veut afficher les documents PDF dans un autre iFrame. Je fais cela par l'obtention de l'URL du document PDF et le réglage de window.frames['docview'].location = url; Dans la plupart des cas, l'iframe affichage reste vide (ou efface si quelque chose y était présenté précédemment). Si je prends la même URL, et de l'ouvrir dans un nouvel onglet ou une fenêtre, il rend très bien.

Quand il ne parvient pas à rendre dans mon iframe, je vois le message suivant dans la console Chromée:

Resource interpreted as Document but transferred with MIME type application/pdf.

Firefox ne propose pas de message de toute nature dans sa console d'erreur, ou sur la console de FireBug.

Je n'ai pas de contrôle sur la source des fichiers PDF, donc je ne peut pas modifier leurs informations d'en-tête.

Curieusement, certains fichiers ne charge pas correctement.

En regardant les demandes de réseau en Chrome, pour un document qui ne parvient pas à charger je vois (par exemple):

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:200 OK

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:es.csiro.au
Referer:http://querium.fxpal.net:8080/querium/ui/query?searcherId=2&compact=true&sidx=rank&topicId=2&queryId=1&lastEventId=1490893682130103&highlight=undefined
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:71764
Content-Type:application/pdf
Date:Tue, 06 Sep 2011 04:59:26 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Last-Modified:Wed, 07 Nov 2007 04:07:49 GMT
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

Lors de l'ouverture d'un onglet séparé (où le document ne le rendu), j'ai l'suivantes:

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:es.csiro.au
If-Modified-Since:Wed, 07 Nov 2007 04:07:49 GMT
If-None-Match:"1f48c8-11854-43e4ee482ef40"
Range:bytes=0-71763
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Connection:Keep-Alive
Date:Tue, 06 Sep 2011 05:07:15 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

L'une des choses bizarres est la différence de statut, mais peut-être que le serveur est intelligent ou il y a de drôles d'interaction avec le cache. Qui sait.

Toute aide serait grandement appréciée.

Gène

ÉDITÉ: 9/6/2011

Quand j'ai enlevé la balise

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

de la <head> élément de ma page HTML, la plupart (mais pas tous) des fichiers Pdf a commencé rendu correctement. C'était une double apparente d'une autre balise meta dans l'en-tête:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Est-ce à aider à jeter quelque lumière sur le problème potentiel?

OriginalL'auteur Gene Golovchinsky | 2011-09-06

  1. 2

    Au lieu de définir la src attribut de l'iframe pour le PDF, mis à un wrapper HTML de fichier, qui contient une simple div:

    <!DOCTYPE html>
<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
    <div id="divContents" style="height:100%;"></div>
</body>
</html>

    En javascript, le contenu de la div est définie à une object élément. Malheureusement versions légèrement différentes sont nécessaires pour travailler fiable sur tous les navigateurs (testé sur IE, Firefox et Chrome):

    (J'ai simplifié de la recherche, divContents élément et la détection du navigateur)

    var embed = '<object type="application/pdf" width="100%" height="100%"';
if (msie) {
    embed += '><param name="src" value="' + pdf + '"/>';
}
else if (chrome) {
    embed += ' src="' + pdf + '">';
}
else {
    embed += ' data="' + pdf + '">';
}
embed += '</object>';
$("#divContents").html(embed);

    Mis à JOUR

    J'ai enfin trouvé la cause réelle de la panne dans Chrome: C'est le Accept-Ranges:bytes champ, sans Chrome ne fonctionne pas lorsque l' data attribut est utilisé.

    • Donc, si votre serveur est capable de supporter la Accept-Ranges terrain, vous devez vous assurer qu'il est retourné au client. Dans ce cas, vous pouvez utiliser le pdfobject bibliothèque pour afficher le PDF dans un cadre ou div.
    • Si non, vous pouvez utiliser le code ci-dessus pour afficher le PDF dans un cadre ou div.
    merci, je vais jeter un oeil à cette stratégie lorsque je reviendrai à ce projet.

    OriginalL'auteur mhu

  2. 0

    Dans le passé, quelques problèmes ont été signalés avec l'pdf chargés dans des iframes, à la fois pour Firefox et Chrome (en particulier lorsque les en-têtes comme Content-Type et Content-Disposition ne sont pas correctement configuré).

    Vous devriez probablement utiliser un <object> étiquette à intégrer un fichier pdf dans votre page, au lieu d'une iframe, mais une solution plus facile est la pdfobject de la bibliothèque. Pour vérifier cela fonctionne, vous pouvez parcourir cette jsfiddle avec Chrome et Firefox.

    En outre, vous pouvez utiliser un script de proxy dans votre serveur pour diffuser les fichiers Pdf: votre page pointe vers le script de proxy et de passer un identificateur (de sorte qu'il ne sera pas piraté facilement) et le script va télécharger et de les envoyer au navigateur de l'appariement des pdf avec le bon en-têtes.

    Enfin une note sur les différents codes d'état: dans la première réponse, le serveur a envoyé au navigateur de l' Last-Modified et la ETag qui contient un horodatage et un hachage du fichier; ainsi, le navigateur, dans la deuxième demande de poser pour la resourse seulement 

    If-Modified-Since:Wed, 07 Nov 2007 04:07:49 GMT
If-None-Match:"1f48c8-11854-43e4ee482ef40"

    Car la ressource n'a pas changé, la deuxième réponse est un 304.

    Le pdfobject bibliothèque est rien de plus que cette ligne de code: targetNode.innerHTML = '<object data="' +url +'" type="application/pdf" width="' +width +'" height="' +height +'"></object>';. Malheureusement, cela ne fonctionne pas avec google Chrome (voir ma réponse).
    Votre exemple peut fonctionner ou pas, mais je pense que vous êtes un peu ungenerous avec PDFObject, depuis il prend en charge de Chrome parfaitement. Essayez de visiter le exemples avec Chrome ou Firefox.
    Mmm... vous n'avez pas besoin l'iframe si vous utilisez PDFObject. Pouvez-vous partager le code html que vous utilisez (par exemple via pastebin ou jsfiddle)?
    J'ai besoin de l'iframe dans mon projet. Voir ma réponse pour le code html. Si vous utilisez l'attribut data-dans ce cas, le fichier PDF ne s'affichent pas dans Chrome, mais à l'aide de la src-attribut est fait.
    C'est le Accept-Ranges:bytes champ, sans Chrome ne fonctionne pas lorsque l' data attribut est utilisé, voir mon jour de réponse. Je vais vous grand vous le bounty, parce que le test de votre exemple contre les différents serveurs m'a donné l'aperçu.

    OriginalL'auteur Giacomo Tesio