javascript 如果 iframe 未加载或加载，想要调用函数吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9534001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Want to call a function if iframe doesn't load or load's?
提问by Kunal Vashist
I have a iframein my page. If the iframedoesn't load, want it to alertthe message "pdf not found" and if the iframedoes load, it should alert"pdf opened".
iframe我的页面中有一个。如果iframe没有加载，希望它alert显示“ pdf not found”消息，如果iframe加载了，它应该alert“ pdf open”。
Does anyone know how to achieve that?
有谁知道如何实现这一目标？
回答by ?ime Vidas
So, 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.
因此，我们的想法是使用 Ajax 请求来“测试” URL。Ajax 请求使您能够绑定“成功”和“错误”处理程序——与<iframe>仅提供“加载”处理程序的元素不同。
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.
当然，Ajax 请求受同源策略限制（除非网络服务器启用 CORS），但您声明 PDF 位于同一域中，因此应该没有任何问题。
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.
另外，你说你使用 Mootools 库 - 我使用 jQuery，所以我只能为你提供一个 jQuery 解决方案，但由于我们正在使用“成功”和“错误”处理程序制作一个简单的 Ajax 请求，你应该能够轻松地基于我的 jQuery 解决方案重新创建 Mootools 解决方案。
So, given an iframe and an URL:
因此，给定一个 iframe 和一个 URL：
var iframe = $( '#iframe' )[0]; // reference to IFRAME element
var url = 'files/document1.pdf';
The Ajax-request:
Ajax 请求：
$.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/
成功演示：http : //jsfiddle.net/CZWdL/1/show/
错误演示：http : //jsfiddle.net/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 srcproperty manually.
因此，如果 Ajax 请求触发了“错误”事件，我们只需立即提醒“未找到”消息。然而，如果 Ajax 请求触发了“成功”事件，我们将一个“加载”处理程序分配给我们的 IFRAME 元素（这个“加载”处理程序最终会提醒“已加载”消息），并src手动将 URL 设置为其属性.
回答by akiavara
You can simply add this code in your iframe when it's loaded :
您可以在 iframe 加载时简单地添加此代码：
<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.
如果你的回调函数在 30 秒后没有被调用，你可以说你的 pdf 没有加载。
Edit : Your first file (with the iframe) :
编辑：您的第一个文件（使用 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文件）：
<?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']
不要忘记保护 $_GET['f']
