首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >适用于<script>的innerHTML在FF中工作,而不是IE

适用于<script>的innerHTML在FF中工作,而不是IE
EN

Stack Overflow用户
提问于 2012-03-20 01:42:46
回答 3查看 1.3K关注 0票数 5

我正在尝试通过Ajax填充一个<select>元素。它在FF中工作得很好,但我在IE中得到了一个unknown runtime error

HTML:

代码语言:javascript
运行
复制
<select id="emp_select" name="emp_select">
    <option value=" ">Please enter a store</option> 
</select>

Javascript:

代码语言: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处理程序调用一个函数来填充(全部)不同的select元素,以及一个包含所有雇员的关联数组的JavaScript对象,以将姓名与作为两个select元素中的选项值返回的雇员id进行匹配。

返回的XHR文本(对于xhrJSON,内容类型=应用程序/json):

代码语言:javascript
运行
复制
var empArray = new Array({ id:"12345678", title:"The Title", code:"C123", name:"John Doe"},...);

返回的XHR文本(xhrEmpSelect,content-type= Text /html):

代码语言:javascript
运行
复制
<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 /html

所以在FF中,一切都很好,JS对象被插入到DOM中,两个<select>元素也都被填充了。但在IE中,我在xhrJSON.onreadystatechange处理程序中得到了一个unknown runtime error,在那里我尝试将js.innerHTML设置为xhrJSON.responseText

我做错了什么?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-03-20 01:49:59

尝试使用js.text = xhrJSON.responseText;而不是innerHTML。我相信您遇到的问题与您不能将超文本标记语言插入<script>块的事实有关。

票数 5
EN

Stack Overflow用户

发布于 2012-03-20 01:48:47

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

代码语言:javascript
运行
复制
js.innerText = xhrJSON.responseText;
//Since FF do not sussport innerText but it does support textContent
js.textContent = xhrJSON.responseText;

我建议您将您的代码迁移到jQuery,它将更简单、更易读、更易于维护,而无需担心跨浏览器支持。jQuery为你做了所有的事情。

票数 0
EN

Stack Overflow用户

发布于 2012-03-20 01:53:03

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

代码语言:javascript
运行
复制
js.setText(xhrJSON.responseText);

请参阅上面的链接中的W3规范。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9775109

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档