I have a iframe in my page. If the iframe doesn't load, want it to alert the message "pdf not found" and if the iframe does load, it should alert "pdf opened".
Does anyone know how to achieve that?
I have a iframe in my page. If the iframe doesn't load, want it to alert the message "pdf not found" and if the iframe does load, it should alert "pdf opened".
Does anyone know how to achieve that?
Share Improve this question edited Jul 21, 2013 at 17:23 Brian McCutchon 8,5844 gold badges35 silver badges45 bronze badges asked Mar 2, 2012 at 13:20 Kunal VashistKunal Vashist 2,4716 gold badges33 silver badges64 bronze badges 8- Are you loading a PDF file into the iframe? – Šime Vidas Commented Mar 2, 2012 at 13:30
- @ŠimeVidas yes . i want like this if pdf cannot get loaded from server a message box "alert " should e – Kunal Vashist Commented Mar 2, 2012 at 13:36
- Is the PDF on the same domain as the web-page? – Šime Vidas Commented Mar 2, 2012 at 14:04
- How do you make Ajax calls? Which library do you use? – Šime Vidas Commented Mar 2, 2012 at 20:51
- No i haven't use any ajax calls for this part? Mootools am using – Kunal Vashist Commented Mar 3, 2012 at 15:32
2 Answers
Reset to default 11So, the idea is to use an Ajax-request to "test" the URL. Ajax-requests enable you to bind "success" and "error" handlers - unlike <iframe> elements which only provide a "load" handler.
Of course, Ajax-requests are restricted by the Same Origin Policy (unless the web-server enables CORS), but you stated that the PDF is on the same domain, so there shouldn't be any issues.
Also, you stated that you use the Mootools library - I use jQuery, so I can only provide you with a jQuery solution, but since we're making a simple Ajax-request with "success" and "error" handlers, you should be able to recreate a Mootools solution based on my jQuery solution easily.
So, given an iframe and an URL:
var iframe = $( '#iframe' )[0]; // reference to IFRAME element
var url = 'files/document1.pdf';
The Ajax-request:
$.get( url, function () {
iframe.onload = function () { alert( 'PDF opened!' ); };
iframe.src = url;
}).error( function () { alert( 'PDF not found' ); });
Success-demo: http://jsfiddle/CZWdL/1/show/
Error-demo: http://jsfiddle/CZWdL/2/show/
So, if the Ajax-request triggers an "error" event, we simply alert the "Not found" message immediately. If, however, the Ajax-request triggers a "success" event, we assign a "load" handler to our IFRAME element (this "load" handler will eventually alert the "Loaded" message), and set the URL to its src property manually.
You can simply add this code in your iframe when it's loaded :
<script type="text/javascript">
<!--
window.top.window.callback();
//-->
</script>
And in your top page :
<script type="text/javascript">
<!--
function callback() {
alert("File loaded!");
}
//-->
</script>
If your callback function is not called after 30 seconds, you can say that your pdf is not loaded.
Edit : Your first file (with the 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>
The second (php file) :
<?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>
';
}
?>
Don't forget to secure the $_GET['f']