2013-03-18 12 views
29

ramach naszej aplikacji internetowej jesteśmy wyświetlania dokumentu PDF w iframe stosując następujący wiersz kodu:Problemy wyświetlania PDF w iFrame na Mobile Safari

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
          style="width:100%; height:500px;"></iframe> 

To działa prawidłowo we wszystkich głównych przeglądarek stacjonarnych o szerokości skalowania PDF, aby zmieścić się w granicach ramki iFrame i pionowego paska przewijania, aby wyświetlić wszystkie strony w dokumencie.

W tej chwili jednak nie mogę poprawnie wyświetlić pliku PDF w przeglądarce Mobile Safari. W tym przypadku widoczna jest tylko górna lewa część pliku PDF bez poziomych lub pionowych pasków przewijania, aby wyświetlić pozostałą część dokumentu.

Czy ktoś wie o obejściu tego problemu w Mobile Safari?

AKTUALIZACJA - marzec 2013

Po godzinach poszukiwań i doświadczeń mogę stwierdzić, że ten problem jest prawdziwy bałagan !! Istnieje wiele rozwiązań, ale każda z nich nie jest idealna. Ktoś, kto boryka się z tym problemem, radzę odnieść się do "Strategies for the iFrame on the iPad Problem". Dla mnie muszę napisać to i znaleźć inne rozwiązanie dla naszych użytkowników iPadów.

AKTUALIZACJA - maj 2015

Tylko szybka zmiana w tej kwestii. Niedawno zacząłem używać przeglądarki Google Drive, która w większości rozwiązała pierwotny problem. Wystarczy podać pełną ścieżkę do dokumentu PDF, a Google zwróci sformatowaną w formacie HTML interpretację pliku PDF (nie zapomnij ustawić embedded=true). na przykład

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

Używam tego jako awaryjne dla mniejszych rzutniach i po prostu osadzanie powyższy odnośnik do mojego .

+3

Odnośnie twojej „Update - MAJ 2015” - Rozwiązanie widz Dysk Google pracuje dla mnie świetnie i wydaje się być rozwiązany IOS Safari i problemy Androida jedliśmy. DZIĘKI! –

+0

Jak to działa jednak, gdy odwołujesz się do Dysku Google na iFrame o innym pochodzeniu? Podczas próby osadzenia linku do Dysku Google pojawia się błąd "" X-Frame-Options "do" tego samego ". – vesperae

+0

Myślałem, że to rozwiąże mój problem, ale otrzymuję komunikat 'Podgląd niedostępny" zbyt wiele razy używając Google:/ – Ancinek

Odpowiedz

2

spróbować pdf.js powinny również działać wewnątrz Mobile Safari: https://github.com/mozilla/pdf.js/

+7

Późno na imprezę, ale od pewnego czasu testowałem PDF.js na iOS, i to jest bolesne. Wydajność jest horrendalna, a przy dużych dokumentach wykorzystuje tyle pamięci, że powoduje awarię przeglądarki. –

-1

Mam ten sam problem. Zauważyłem, że ustawiając fokus na dane wejściowe (nie działa z tagami div), wyświetlany jest plik pdf.

Naprawiam go, dodając ukryte wejście i ustawiając na nim fokus. to obejście nie spowalnia aplikacji.

<html><head> 
<script> 
    $(document).ready(function() { 
     $("#myiframe").load(function() { setTimeout(function() { $(".inputforfocus").focus(); }, 100); }); 
    }); 
</script></head> 
<body> 
<div class="main"> 
    <div class="level1">Learning</div> 
    <input type="hidden" class="inputforfocus"> 
    <div> 
     <iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe> 
    </div> 
</div> 
</body> 
</html> 
5

Znalazłem nowe rozwiązanie. Od wersji iOS 8 mobilny przeglądarka Safari renderuje plik PDF jako obraz wewnątrz dokumentu HTML wewnątrz ramki. Następnie można regulować szerokość po załadowaniu PDF:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe> 
<script> 
document.getElementById("theFrame").contentWindow.onload = function() { 
    this.document.getElementsByTagName("img")[0].style.width="100%"; 
}; 
</script> 
+0

Uratujesz mój dzień, wciąż na iOS 10 iFrame jest renderowany jako img – garanda

+1

Ale wyświetla tylko pierwszą stronę dokumentu PDF ... – AlexAcc

Powiązane problemy