innerHTML for <script>在FF中工作，而不在IE中

我試圖通過Ajax填充<select>元素。它在FF中效果很好，但在IE中我得到unknown runtime error。innerHTML for <script>在FF中工作，而不在IE中

HTML：

<select id="emp_select" name="emp_select"> 
    <option value=" ">Please enter a store</option> 
</select>

使用Javascript：

$("#store").blur(function() { 
    populateDropdowns(); 
}); 

... 

function populateDropdowns() { 
     var store = $("#store").val(); 

     if (store.length != 4) { 
      alert("Store # must be 4 digits!"); 
      $("#store").focus(); 
      return false; 
     } 

     var xhrJSON = new XMLHttpRequest(); 
     var xhrEmpSelect = new XMLHttpRequest(); 
     var xhrMgrSelect = new XMLHttpRequest(); 

     var jsonDone = false; 
     var empSelectDone = false; 
     var mgrSelectDone = false; 

     $("#processing-dialog").dialog({ 
       width: 300, 
       height: 150 
     }); 

     xhrJSON.onreadystatechange = function() { 
      if (xhrJSON.readyState == 4) { 
       if (xhrJSON.status == 200) { 
        var js = document.createElement('script'); 
        js.type = 'text/javascript'; 

        js.innerHTML = xhrJSON.responseText; 
        var scr = document.getElementsByTagName('script')[1]; 
        scr.parentNode.insertBefore(js,scr); 

        jsonDone = true; 
        if (jsonDone && empSelectDone && mgrSelectDone) { 
         $("#processing-dialog").dialog("close"); 
         $("#processing-dialog").dialog("destroy"); 
         return true; 
        } 
       } else { 
        return false; 
       } 
      } 
     } 

     xhrEmpSelect.onreadystatechange = function() { 
      if (xhrEmpSelect.readyState == 4) { 
       if (xhrEmpSelect.status == 200) { 
        $("#emp_select").html(xhrEmpSelect.responseText); 
        empSelectDone = true; 
        if (jsonDone && empSelectDone && mgrSelectDone) { 
         $("#processing-dialog").dialog("close"); 
         $("#processing-dialog").dialog("destroy"); 
         return true; 
        } 
       } else { 
        return false; 
       } 
      } 
     } 

     xhrMgrSelect.onreadystatechange = function() { 
      if (xhrMgrSelect.readyState == 4) { 
       if (xhrMgrSelect.status == 200) { 
        $("#mgr_select").html(xhrMgrSelect.responseText); 
        mgrSelectDone = true; 
        if (jsonDone && empSelectDone && mgrSelectDone) { 
         $("#processing-dialog").dialog("close"); 
         $("#processing-dialog").dialog("destroy"); 
         return true; 
        } 
       } else { 
        return false; 
       } 
      } 
     } 

     var url = "ajax.cgi"; 

     var JSONdata = "action=generateJSON&store=" + store; 
     var EmpSelectData = "action=generateEmpSelect&store=" + store; 
     var MgrSelectData = "action=generateMgrSelect&store=" + store; 

     xhrJSON.open("POST",url); 
     xhrJSON.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     xhrJSON.send(JSONdata); 

     xhrEmpSelect.open("POST",url); 
     xhrEmpSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     xhrEmpSelect.send(EmpSelectData); 

     xhrMgrSelect.open("POST",url); 
     xhrMgrSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     xhrMgrSelect.send(MgrSelectData); 
    }

的blur處理程序調用來填充（全部）不同的選擇元素的函數，加上持有的所有的關聯數組JavaScript對象員工匹配一個名稱，其中包含作爲select元素中的選項值返回的員工ID。

XHR文本返回（對於xhrJSON，內容類型=應用/ JSON）：

var empArray = new Array({ id:"12345678", title:"The Title", code:"C123", name:"John Doe"},...);

XHR文本返回（xhrEmpSelect，內容類型= text/html的）：

<option value=" ">Select One</option> 
<option value="John Doe">John Doe</option> 
<option value="Joe Blow">Joe Blow</option> 
... 
<option value="other">Other...</option> 
</select>

爲xhrMgrSelect返回類似的文本，content-type = text/html

所以在FF中一切正常，JS Object碰到並插入到DOM中，並且兩個<select>元素都是人口也是如此。但在IE中，我在xhrJSON.onreadystatechange處理程序中得到unknown runtime error，我試着將js.innerHTML設置爲xhrJSON.responseText。

我在做什麼錯？

來源

2012-03-19 daniel0mullins

哎呀！如果您使用的是jQuery，則應該使用.Ajax例程 - 在這些x平臺問題中讓您的生活變得輕鬆。 – Hogan 2012-03-19 17:45:39

我從來沒有好運與$ .ajax（並從來沒有打擾到真的排除故障！我知道，對我的恥辱......-( – daniel0mullins 2012-03-19 17:48:20

它與*運氣* – 2012-03-19 17:48:54

嘗試使用js.text = xhrJSON.responseText;而不是innerHTML。我相信您遇到的問題與您無法將HTML插入到<script>塊中的事實有關。

來源

2012-03-19 17:49:59 pseudosavant

這是明顯的贏家。 'innerText'和'textContent'沒有爲我工作。 'setText（text）'也沒有。謝謝@pseudosavant！ – daniel0mullins 2012-03-19 19:27:43

由於您正在設置腳本，因此您應該使用innerText而不是innerHTML。嘗試這個。

js.innerText = xhrJSON.responseText; 
//Since FF do not sussport innerText but it does support textContent 
js.textContent = xhrJSON.responseText;

我會建議你遷移你的代碼的jQuery，這將是更簡單，易讀，易維護，而不跨瀏覽器支持任何後顧之憂。 jQuery爲你做了一切。

來源

2012-03-19 17:48:46 ShankarSangoli

要設置HTMLScriptElement對象的內容，（使用document.createElement('script');創建的），你應該使用，而不是試圖設置腳本的innerHTML對象的setText方法。

js.setText(xhrJSON.responseText);

請參閱上述鏈接中的W3規範。

來源

2012-03-19 17:53:03 Rondel

innerHTML for <script>在FF中工作，而不在IE中

回答

相關問題