2012-03-02 10 views
8

Mam na mojej stronie iframe. Jeśli iframe nie ładuje, chcą go alert komunikat „Nie znaleziono pdf” i jeśli iframe jest ładowany, to powinien alertpdf otworzył”.Czy chcesz wywołać funkcję, jeśli element iframe nie ładuje się lub ładuje?

Czy ktoś wie, jak to osiągnąć?

+0

Czy ładujesz plik PDF do elementu iframe? –

+0

@ ŠimeVidas yes. Chcę tak, jeśli pdf nie może zostać załadowany z serwera, powinien pojawić się komunikat "alert". –

+0

Czy plik PDF znajduje się w tej samej domenie co strona internetowa? –

Odpowiedz

9

Chodzi o to, aby użyć żądania Ajax do "przetestowania" adresu URL. Żądania Ajax umożliwiają wiązanie procedur obsługi "sukcesu" i "błędu" - w przeciwieństwie do elementów , które udostępniają tylko procedurę obsługi "ładowania".

Oczywiście, żądania Ajax są ograniczone przez zasady Same Origin (chyba że serwer WWW umożliwia CORS), ale użytkownik stwierdził, że plik PDF znajduje się w tej samej domenie, więc nie powinno być żadnych problemów.

Podano również, że korzystasz z biblioteki Mootools - używam jQuery, więc mogę zapewnić ci tylko rozwiązanie jQuery, ale ponieważ tworzymy proste żądanie Ajax z obsługą "sukcesu" i "błędu" , powinieneś być w stanie odtworzyć rozwiązanie Mootools oparte na moim rozwiązaniu jQuery.

więc, biorąc pod uwagę iframe i URL:

var iframe = $('#iframe')[0]; // reference to IFRAME element 
var url = 'files/document1.pdf'; 

Ajax-request:

$.get(url, function() { 
    iframe.onload = function() { alert('PDF opened!'); }; 
    iframe.src = url; 
}).error(function() { alert('PDF not found'); }); 

Success-demo:http://jsfiddle.net/CZWdL/1/show/
Error-demo:http://jsfiddle.net/CZWdL/2/show/

Tak więc, jeśli t Żądanie Ajax wyzwala zdarzenie "błąd", natychmiast po prostu ostrzegamy wiadomość "Nie znaleziono". Jeśli jednak żądanie Ajax wyzwala zdarzenie "powodzenia", przypisujemy procedurę obsługi "load" do naszego elementu IFRAME (ten moduł obsługi "load" w końcu ostrzeże komunikat "Loaded") i ustawi adres URL na jego właściwość src ręcznie.

+1

Ten również nie działa. Wywołanie błędu JQuery wykrywa kod stanu. W niektórych przypadkach serwer zwraca status 200 wraz z opcją x-frame: SAMEORIGIN. google.com to robi. –

+0

Mam na myśli, że nie będzie działać ogólnie. Ale w przypadku OP, tj. Ładowanie pdf w iframe, powinno działać. –

+0

Czekaj, zarówno JQuery, jak i iFrame pobierają adres URL? Czy to nie jest trochę ciężkie? –

-2

Można po prostu dodać ten kod w iframe, gdy jest załadowany:

<script type="text/javascript"> 
<!-- 
     window.top.window.callback(); 
//--> 
</script> 

aw swojej górnej stronie:

<script type="text/javascript"> 
<!-- 
     function callback() { 
       alert("File loaded!"); 
     } 
//--> 
</script> 

Jeśli funkcja zwrotna nie nazywa się po 30 sekundach, można powiedz, że twój PDF nie jest załadowany.


Edit: Twój pierwszy plik (z iframe):

<html> 
    <head> 
     <script type="text/javascript"> 
     <!-- 
      function callback() { 
       alert("This file doesn't exist"); 
      } 
     //--> 
     </script> 
    </head> 
    <body> 
     <iframe src="load_pdf.php?f=test.pdf" style="width:900px;height:500px;"></iframe> 
    </body> 
</html> 

Drugi (plik php):

<?php 
$file = $_GET['f']; 

if(is_file($file)) { 
    header('Content-type: application/pdf'); 
    readfile($file); 
} 
else { 
    // This file doesn't exist 
    echo ' 
     <script type="text/javascript"> 
     <!-- 
       window.top.window.callback(); 
     //--> 
     </script> 
    '; 
} 
?> 

Nie zapomnij zabezpieczyć $ _GET [ 'f']

+0

Czy możesz przesłać jakiś przykład w skrzypcach? –

+1

Nie sądzę, aby to rozwiązanie działało w tym konkretnym scenariuszu, ponieważ strona wewnątrz elementu iframe to nie HTML, to dokument PDF. – Fenton