PHP Script в IFRAME Блоки Другой код

Сценарий:

У меня есть два сценария PHP, которые нужно вызывать одновременно:

Первый скрипт будет запускаться несколько минут (загрузка файлов на основе PHP), в зависимости от загруженного размера файла. Он помещается в <iframe> поэтому он может запускаться отдельно и не блокирует браузер.
Второй PHP-скрипт должен вызываться через регулярные промежутки времени, чтобы отслеживать выполнение первого сценария – загрузка файла. Чтобы избежать открытия новых окон после завершения скрипта, он вызывается через AJAX.

Проблема:

Я поместил длительный PHP Script (сценарий загрузки) в <iframe> чтобы этот скрипт мог запускаться асинхронно с другим скриптом PHP для мониторинга. Однако, несмотря на то, что основной скрипт находится в <iframe> , когда веб-страница запускается, скрипт запускается и блокирует выполнение оставшегося кода JavaScript и скрипта мониторинга, который несколько раз запускается через AJAX.

Очень важно, чтобы скрипт PHP с короткой проверкой запускался одновременно с длительным сценарием PHP (загрузка), поэтому сценарий короткого запуска (мониторинга) может обеспечивать обратную связь с JavaScript.

Вы бы так любезны и проанализировали мои образцы кода, пожалуйста? Я понятия не имею, где моя проблема. Мой код настолько прост, что все должно работать хорошо.

Версия PHP 5.4.12
Apache / 2.4.4 (Win64) PHP / 5.4.12
Windows 7 x64
ОЗУ 8 ГБ
Версия Google Chrome 30.0.1599.101 м

Образцы кода:

Код JavaScript, вызывающий оба скрипта PHP:

 <!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>

Дайте мне знать, будет ли это работать после этого.