將firefox javascript轉換為IE javascript

Question

我一直試圖獲得一些在FireFox中運行良好的AJAX代碼，以便在IE中運行。 我在更新腳本中的某些表時遇到了一些麻煩。 我見過很多其他人都有類似的問題，但他們發現的解決方案都沒有對我有用。 問題首先發生在線上

qe3Table.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";

我收到錯誤“'null'為null或不是對象”

我很確定我的所有其他錯誤都與這個錯誤的類型相同，我的AJAX腳本和一些隨附的javascript如下所示。

<script type="text/javascript">
<!--
//obtains the box address for a QE3 on the system for the given index
function getQE3BoxAddressHash(index)
{
    var retVal = 0x00000100; //initial value for QE3 boxes
    retVal |= (index & 0x000000FF);
    return retVal;
}

//obtains the box address for a QED on the system for the given index
function getQEDBoxAddressHash(index)
{
    var retVal = 0x00001300; //initial value for QED boxes
    retVal |= ((index & 0x0000000F) << 4);
    retVal |= ((index & 0x000000F0) >> 4);
    return retVal;
}
-->
</script>
<script type="text/javascript">
<!--
var textSocket;
function fillTables()
{
    if(textSocket.readyState != 4)
        return;
    var qe3Table = document.getElementById("QE3_TABLE");
    var qedTable = document.getElementById("QED_TABLE");

    var rawData = textSocket.responseText.split("::::");

    var qe3Data = new Array();
    var qedData = new Array();

    var qe3Index = 0;
    var qedIndex = 0;


    for(var item in rawData)
    {
        if(rawData[item].indexOf("QA") != -1)
        {
            qe3Data[qe3Index++] = rawData[item];
        }
        else if(rawData[item].indexOf("QED") != -1)
        {
            qedData[qedIndex++] = rawData[item];
        }
    }


    qe3Table.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";
    qedTable.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";

    for(var value in qe3Data)
    {
        var components = qe3Data[value].split("-");
        if(components.length != 3)
            continue;
        qe3Table.innerHTML += 
        "<tr>\n" +
        "   <td>" + components[0] + "-" + components[1] +"</td>\n" +
        "   <td>" + 
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color=\"green\"><b>ONLINE</b></font>":
                "<font color=\"red\"><b>OFFLINE</b></font>")+
        "</td>\n" +
        "   <td>\n <input type=\"button\" onclick=\"window.location='system_status.php?boxAddress=" + getQE3BoxAddressHash(value).toString(16) + "'\" value='View Status for " + components[0] + "-" + components[1] +"'></input> </td>\n" +
        "</tr>\n";
    }
    for(var value in qedData)
    {
        var components = qedData[value].split("-");
        if(components.length != 3)
            continue;
        qedTable.innerHTML += 
        "<tr>\n" +
        "   <td>" + components[0] + "-" + components[1] +"</td>\n" +
        "   <td>" + 
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color=\"green\"><b>ONLINE</b></font>":
                "<font color=\"red\"><b>OFFLINE</b></font>")+
        "</td>\n" +
        "   <td>\n <input type=\"button\" onclick=\"window.location='system_status.php?boxAddress=" + getQEDBoxAddressHash(value).toString(16) + "'\" value='View Status for " + components[0] + "-" + components[1] +"'></input> </td>\n" +
        "</tr>\n";
    }
}

function initAjax()
{
    try
    {
        // Opera 8.0+, Firefox, Safari
        textSocket = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer Browsers
        try
        {
            textSocket = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                textSocket = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                // Something went wrong
                alert("A browser error occurred.");
                return false;
            }
        }
    }

    textSocket.onreadystatechange=fillTables
}

function reloadTables()
{
    textSocket.open("GET","ajax_scripts/get_connected_boxes.php",true);
    textSocket.send(null);
}

function init()
{
    initAjax();
    reloadTables();
}

window.onload=init();
-->
</script>

Answer 1

問題可能在於：

var qe3Table = document.getElementById("QE3_TABLE");

如果您在加載正文之前運行此腳本，那么該腳本將不存在。 檢查該變量是否包含任何內容。

Answer 2

我試過你們兩個人的修復，但他們似乎沒有幫助。 最后，我轉換了表單的所有調用：

qe3TableNew.innerHTML = ("<tr>\n" +"    <th>Name</th>\n" +" <th>Status</th>\n" +"   <th>View Status</th>\n" +"</tr>\n");

至

    var row;
    var cell;
    var text;
    var font;
    row = document.createElement("tr");
    qe3TableNew.appendChild(row);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Name");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Status");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("View Status");
    cell.appendChild(text);

這似乎解決了它，所以我認為這與IE無法處理innerHTML的變化有關。

謝謝你的幫助。

Answer 3

至少有一個問題（可能產生上述症狀）是這樣的：

window.onload=init();

提示：（ ()運算符立即執行該函數並計算返回值。 這反過來可能允許XHR處理程序（在某些情況下）在DOM可能未准備好時觸發。

快樂的編碼。