场景:
我有两个 PHP 脚本要同时调用:
- 第一个脚本将运行几分钟(基于 PHP 的文件下载)，具体取决于下载的文件大小。它被放入
<iframe>因此它可以单独运行并且不会阻塞浏览器。 - 应该定期调用第二个 PHP 脚本来监视第一个脚本的执行 - 文件下载进度。为了避免在脚本完成时打开新窗口，它通过 AJAX 调用。
问题:
我已将长时间运行的 PHP 脚本(下载脚本)放入 <iframe>因此该脚本可以与其他监控 PHP 脚本异步运行。但是，尽管主脚本在 <iframe> 中，当网页开始执行时，脚本启动并阻止执行剩余的 JavaScript 代码和通过 AJAX 多次调用的监控脚本。
让短期运行的监控 PHP 脚本与长时间运行的 PHP(下载)脚本同时调用很重要，这样短期运行的(监控)脚本可以向 JavaScript 提供反馈。
请您帮我分析一下我的代码示例好吗？我不知道，我的问题在哪里。我的代码非常简单，一切都应该运行良好。
- PHP 版本 5.4.12
- Apache/2.4.4 (Win64) PHP/5.4.12
- Windows 7 x64
- 8GB 内存
- 谷歌浏览器版本 30.0.1599.101 m
代码示例:
调用两个 PHP 脚本的 JavaScript 代码:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body onload="callScripts();">
<script type="text/javascript">
// call both PHP scripts(download and monitoring) in desired order
callScripts = function()
{
// call the monitoring PHP script multiple times in 2 second intervals
window.setTimeout(function(){startDownloadMonitoring()}, 1000);
window.setTimeout(function(){startDownloadMonitoring()}, 3000);
window.setTimeout(function(){startDownloadMonitoring()}, 5000);
window.setTimeout(function(){startDownloadMonitoring()}, 7000);
window.setTimeout(function(){startDownloadMonitoring()}, 9000);
};
// call monitoring PHP script via AJAX
function startDownloadMonitoring()
{
console.log("Calling startDownloadMonitoring()...");
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log("Response Received: " + xmlhttp.responseText);
}
}
xmlhttp.open("GET", "PHP/fileDownloadStatus.php", true);
xmlhttp.send();
}
</script>
<iframe src="PHP/fileDownload.php"></iframe>
</body>
</html>
PHP 监控脚本(fileDownloadStatus.php)
<?php
include 'ChromePhp.php';
// start session, update session variable, close session
session_start();
$_SESSION['DownloadProgress']++;
ChromePhp::log('$_SESSION[\'DownloadProgress\'] = ' . $_SESSION['DownloadProgress']);
session_write_close();
echo "success";
?>
PHP 长时间运行脚本 (fileDownload.php)
<?php
include 'ChromePhp.php';
// disable script expiry
set_time_limit(0);
// start session if session is not already started
session_start();
// prepare session variables
$_SESSION['DownloadProgress'] = 10;
session_write_close();
for( $count = 0; $count < 60; $count++)
{
sleep(1);
print("fileDownload Script was called: ". $count);
echo "Download script: " . $count;
ob_flush();
flush();
}
?>
截图:
PHP 脚本执行顺序 - 浏览器等待完成 <iframe> 中的脚本
最佳答案
你的问题和你想象的一样简单。你只是没有意识到它可能是因为缺乏 HTML 知识。所以你的代码没问题，一切都按你想要的方式工作，但应该同时运行的脚本却没有，问题是什么？
<body onload="callScripts();">
这是你的问题。 onload仅当所有内容都在 body 中时才会调用标签已完全加载。所以，作为你的 iframe在 body 里面html 解释器加载所有内容(包括 iframe 及其源代码)，然后调用您的 callScripts功能。
为了解决您的问题，我建议您创建自己的 iframe在你的脚本中。会是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- You should always define your script in the head tag. best pratice
defined in W3C -->
<script type="text/javascript">
callScripts = function (){
//write your Iframe Here
document.getElementById("callDownload").innerHTML = '<iframe src="PHP/fileDownload.php"></iframe>';
callScripts_refresh();
}
// call both PHP scripts(download and monitoring) in desired order
callScripts_refresh = function()
{
// call the monitoring PHP script multiple times in 2 second intervals
window.setTimeout(function(){startDownloadMonitoring()}, 1000);
window.setTimeout(function(){startDownloadMonitoring()}, 3000);
window.setTimeout(function(){startDownloadMonitoring()}, 5000);
window.setTimeout(function(){startDownloadMonitoring()}, 7000);
window.setTimeout(function(){startDownloadMonitoring()}, 9000);
};
// call monitoring PHP script via AJAX
function startDownloadMonitoring()
{
console.log("Calling startDownloadMonitoring()...");
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log("Response Received: " + xmlhttp.responseText);
}
}
xmlhttp.open("GET", "PHP/fileDownloadStatus.php", true);
xmlhttp.send();
}
</script>
</head>
<body onload="callScripts();">
<div id="callDownload"></div>
</body>
</html>
如果成功了请告诉我
关于javascript - IFRAME 中的 PHP 脚本会阻止其他代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19692282/