javascript - 文档更新但 getElementById() 返回不正确的值？

Question

我的问题是我使用 PHP(见下文)成功地增加了我网页上“输入”元素中显示的计数——但在我的 javascript 中我无法检索增加的值——我得到的是旧的未增加的数字.

我将表单发布到隐藏的 iframe，iframe 的 PHP 代码更新了我页面上的输入控件——此处的代码来自 loadImages.php:

 <form style="display: inline-block" name="pictureForm" method="post" 
              autocomplete="off" enctype="multipart/form-data">
   <input type="file" name="picture" id="picture" 
           onchange="return bkgdFileUpload(this);" style="display: inline-block"/>
   <input id="thumbImageCount" name="thumbImageCount"  style="border: 2px solid red" 
                                 value="<?php echo $imageCount ?>" />
 </form>

上面的“imageCount”PHP 变量在页面加载时赋值为 0。注意上面当用户选择一个图像文件时函数 bkgdFileUpload(this) 被调用(这里传递 'this' 是否也将当前 DOM 'document' 对象传递给那个 bkgdFileUpload() 函数？我带来这在下面作为我的问题的可能原因)。

这是 bkgdFileUpload() 函数:

 function bkgdFileUpload(upload_field)
 {
    var currentImageCount = document.getElementById('thumbImageCount').value;

      // THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
    alert("The currentImageCount is: " + currentImageCount);

     // THIS POSTS THE FORM -- NOTE THE 'action' FILE AND THE 'target'
    upload_field.form.action = 'photoPreview.php';
    upload_field.form.target = 'upload_iframe';
    upload_field.form.submit();

     // I know for a fact that before the next bit of code executes, the form
     // has been fully processed because my web page suddenly shows the 'count' 
     // increase on my web page *before* the "alert()" box below appears

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO, *DESPITE* THE FACT THAT
      // THE "thumbImageCount" CONTROL DISPLAYS A "1" !!
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);
 }

您注意到我将此表单的目标设置为 DOM 元素“upload_iframe”，它与上面的代码位于同一 loadImages.php 文件中 - 这是 iframe 标记

 <iframe name="upload_iframe" id="upload_iframe" 
             style="display:block; border: 2px solid red"></iframe>

所以表单的“目标”是一个 iframe；处理表单的文件名为 photoPreview.php

当表单的 PHP 代码在表单被 POST 时执行时，我的 PHP 代码会增加图像的数量(除其他外)。这是在 photoPreview.php 中处理上述表单的 PHP 代码:

 if(isset($_POST['thumbImageCount']))
 {
    $curImageCount = $_POST['thumbImageCount'];

    $newImageCount = $curImageCount + 1;

    echo '<script type="text/javascript">'."\n";

       // THE FORM'S "target" IS AN IFRAME ON MY WEB PAGE, SO
       // GET THE IFRAME'S PARENT DOCUMENT WHICH IS MY WEB PAGE'S
       // DOCUMENT OBJECT so I can update that page's "thumgImageCount"
    echo 'var parDoc = parent.document;' . "\n";

    echo "\n parDoc.getElementById('thumbImageCount').value = '" 
              . $newImageCount . "';";
    echo "\n".'</script>';
    exit();
 }

您可以查看上面的 bkgdFileUpload() 函数，了解表单是如何发布的:

 function bkgdFileUpload(upload_field)
 {
    var currentImageCount = document.getElementById('thumbImageCount').value;

      // THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
    alert("The currentImageCount is: " + currentImageCount);

    upload_field.form.action = 'photoPreview.php';
    upload_field.form.target = 'upload_iframe';
    upload_field.form.submit();

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO, DESPITE THE 'imageCount' 
      // input VALUE SHOWING THE *CORRECT* INCREMENTED VALUE (i.e. the
      // web page indicates that before the next 2 lines of code execute,
      // the 'thumbImageCount' already correctly displays the incremented number
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);
 }

这是(微妙的？)问题。在我的网页上，“thumbImageCount”输入控件(见上文)实际上显示了 正确递增 1 的值。我可以看到更新就发生在页面上，它发生在 之前上面最后两行代码执行之前。

换句话说，上面最后一行代码的 alert() 显示旧值，我看不出我的网页如何在“thumbImageCount”中显示正确的值，但 alert() 仍然显示旧值。

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO EVEN THOUGH THE
      // 'thumbImageCount' input ON MY WEB PAGE SHOWS THE CORRECTLY INCREMENTED
      // NUMBER 
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);

现在，我的运行理论是，通过在 html 代码中传递“this”，当 bkgdFileUpload() 被调用时，当前 DOM 的一个副本被压入堆栈调用框架和 bkgdFileUpload() 内，即使页面显示正确的值，bkgdFileUpload() 仍然具有 DOM 的 document 对象的旧副本。

还是别的？

Answer 1

解决方案是对 DOM 进行缓冲(“阻止”)，我不得不强制为我的页面更新 DOM。我这样做的方法是遵循此 SO 帖子上的答案 #3:
“强制 DOM 刷新”位于 Forcing a DOM refresh in Internet explorer after javascript dom manipulation

请注意，我在 Firefox 中开发，上述解决方案在 Firefox 中也运行良好。