文檔更新但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'文檔'對象傳遞給該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'd，我的PHP代碼會增加圖像的數量（等等）。 這裏是PHP代碼處理表單上面，裏面photoPreview.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」輸入控件（見上）實際上顯示了正確遞增的值，其值爲。我可以在頁面上看到更新發生在之前上面的最後2行代碼執行。

換句話說，alert（），上面的代碼的最後一行顯示OLD值，我看不到我的網頁如何在「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代碼，當bkgdFileUpload（）被調用，一個複製當前DOM的在堆棧上推呼叫即使頁面顯示正確的值，bkgdFileUpload（）仍然具有DOM的文檔對象的舊副本。

還是別的什麼？

Answer 1

解決方案是，DOM被緩衝（'阻止'），我不得不強制爲我的頁面更新DOM。我這樣做的方式是通過在該SO後以下的答案＃3：
在Forcing a DOM refresh in Internet explorer after javascript dom manipulation

請注意，我在Firefox和上述方案制定「強制DOM刷新」在Firefox中工作得很好了。