innerHTML对于<script>标签在Firefox中有效，在IE中无效。

Question

我将尝试通过Ajax来填充一个 <select> 元素。在Firefox浏览器中，一切都很好，但在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 对象，它保存一个关联数组，将姓名与员工 ID 匹配起来，这些 ID 作为两个 select 元素中选项的值返回。

XHR 文本返回（对于 xhrJSON，content-type=application/json）：

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

XHR Text返回结果(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。

在Firefox中一切都很好，JS对象跨越并插入到DOM中，两个元素也被填充。但是在IE中，当我尝试将js.innerHTML设置为xhrJSON.responseText时，在xhrJSON.onreadystatechange处理程序中出现“未知的运行时错误”。 我做错了什么？

- daniel0mullins

---

哎呀！如果你正在使用jQuery，你应该使用.Ajax例程——在这些跨平台问题上让你的生活变得轻松。 - Hogan

我从来没有用$.ajax好运过（也从来没有真正烦恼过它！我知道，我很惭愧... :-( - daniel0mullins

它与“运气”无关 - Karoly Horvath

"医生，当我这样做时很疼。""那就别这样做。" - Hogan

标题说的是<select>标签的innerHTML。问题中展示了一个在<script>标签上的innerHTML。你可能是想在标题中使用<script>标签？ - user1106925

Answer 1

尝试使用js.text = xhrJSON.responseText;代替innerHTML。我认为你遇到的问题与无法在<script>块中插入HTML有关。

- pseudosavant

---

这是明显的赢家。innerText和textContent对我无效。setText(text)也不行。感谢@pseudosavant！ - daniel0mullins

Answer 2

由于您正在设置脚本，因此应使用innerText而不是innerHTML。请尝试这个。

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

我建议您将代码迁移到jQuery，这样会更简单、易读和易于维护，而且不用担心跨浏览器支持的问题。jQuery可以为您完成所有工作。

- ShankarSangoli

Answer 3

要设置HTMLScriptElement对象的内容（使用document.createElement('script');创建），您应该使用对象的setText方法，而不是尝试设置脚本的innerHTML。

js.setText(xhrJSON.responseText);

请查看上面链接中的W3规范。

- Rondel