Хотите вызвать функцию, если iframe не загружается или загружается? - PullRequest
Новая
       14

Хотите вызвать функцию, если iframe не загружается или загружается?

9 голосов
/ 02 марта 2012

У меня есть iframe на моей странице.Если iframe не загружается, укажите alert сообщение « pdf not found », а если iframe загрузится, то должно alert » pdf открыто".

Кто-нибудь знает, как этого добиться?

Ответы [ 2 ]

10 голосов
/ 06 марта 2012

Итак, идея в том, чтобы использовать Ajax-запрос для «проверки» URL. Ajax-запросы позволяют связывать обработчики «success» и «error» - в отличие от <iframe> элементов, которые предоставляют только обработчик «load».

Конечно, Ajax-запросы ограничены одной и той же политикой происхождения (если веб-сервер не поддерживает CORS), но вы указали, что PDF находится в одном домене, поэтому не должно быть никаких проблем.

Кроме того, вы заявили, что используете библиотеку Mootools - я использую jQuery, поэтому могу предоставить вам только решение jQuery, но поскольку мы делаем простой Ajax-запрос с обработчиками «success» и «error», у вас должна быть возможность легко воссоздать решение Mootools на основе моего решения jQuery.

Итак, с учетом iframe и URL: 

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

Ajax-запрос: 

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

Демонстрация успеха: http://jsfiddle.net/CZWdL/1/show/
Ошибка-демо: http://jsfiddle.net/CZWdL/2/show/

Таким образом, если Ajax-запрос вызывает событие «ошибка», мы просто немедленно предупреждаем сообщение «Не найдено». Однако, если Ajax-запрос вызывает событие «success», мы назначаем обработчик «load» нашему элементу IFRAME (этот обработчик «load» в конечном итоге предупредит сообщение «Loaded») и устанавливаем URL-адрес равным * 1023. * свойство вручную.

0 голосов
/ 02 марта 2012

Вы можете просто добавить этот код в свой iframe при загрузке: 

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

И на вашей главной странице: 

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

Если ваша функция обратного вызова не вызывается через 30 секунд, вы можете сказать, что ваш pdf не загружен.

Редактировать: Ваш первый файл (с 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>

Второй (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>
    ';
}
?>

Не забудьте защитить $ _GET ['f']

...