Internet Explorer 兼容性 v9 和 v8 [object Object] ~ 附加

Question

我正在开发一个仪表板项目，其中的一个组件在仪表板上的 "minified" window 中显示摘要 table，用户输入查询参数以生成具体报告。

代码在 Chrome、Firefox、Internet Explorer 11 和 10、Microsoft Edge 中完美呈现，这里是正确呈现内容的示例。

但是，我的一些客户仍在使用 Internet Explorer 9 和 8，我必须使用兼容的代码来支持它们，而正是这些版本我遇到了问题，如下例所示。

因此，如您所见，对于每个用户输入对象，出于某种原因 [object Object] 显示在摘要上方 table.

用户输入变量存储为隐藏标签，示例如下

过程如下

1) 我通过将存储的输入变量传递给服务器来填充 table，并使用结果 return 一个 JSON 对象

 $.getJSON('/analyticsdashboard/SysoutSearch/GetSysout?' + $('#hdnParameters').val().slice($('#hdnParameters').val().indexOf('?') + 1)).done(function (result) {
            var tbl = $("#tbl");
            var tbody = $('#tbl>tbody');

2)然后我和'strip'把变量放到具体的对象中

var jobName = getURLParameterForHtml('jobName', $('#hdnParameters').val());
            var startDate = getURLParameterForHtml('startDate', $('#hdnParameters').val());
            var startTime = getURLParameterForHtml('startTime', $('#hdnParameters').val());
            var endDate = getURLParameterForHtml('endDate', $('#hdnParameters').val());
            var endTime = getURLParameterForHtml('endTime', $('#hdnParameters').val());
            var lastxDays = getURLParameterForHtml('lastxDays', $('#hdnParameters').val());
            var tableName = getURLParameterForHtml('tableName', $('#hdnParameters').val());
            var groupName = getURLParameterForHtml('groupName', $('#hdnParameters').val());
            var applicationName = getURLParameterForHtml('applicationName', $('#hdnParameters').val());
            var memberName = getURLParameterForHtml('memberName', $('#hdnParameters').val());
            var owner = getURLParameterForHtml('owner', $('#hdnParameters').val());
            var nodeId = getURLParameterForHtml('nodeId', $('#hdnParameters').val());
            var endStatus = getURLParameterForHtml('endStatus', $('#hdnParameters').val());
            var serverName = getURLParameterForHtml('serverName', $('#hdnParameters').val());
            var orderId = getURLParameterForHtml('orderId', $('#hdnParameters').val());

下面的getUrlParameter函数

var getUrlParameter = function (sParam, url) {
//debugger;
//window.location.search
var sPageURL = decodeURIComponent(url.substring(1)),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
        return sParameterName[1] === undefined ? true : sParameterName[1];
    }
}

};

3) 然后我测试包含数据的对象，即不为空并将它们作为一行附加到摘要 table 正文中，下面是一个示例

 if (jobName[1]) {
                        var newRow = "<tr><td></td><td>" + "Job Name" + "</td>" + "<td>" + jobName[1] + "<td></td></tr>" + tbody.append(newRow);
                    }

我已经尝试在 SO 此处对此进行研究，例如 Internet Explorer Incompatibility - page just shows "[object Object]" WTH?

但一直无法找到解决方案或完全理解问题。

我想知道

1) 为什么这个问题出现在 IE9 和 IE8 而不是 Chrome、Firefox、IE 10 和 IE11、Microsoft Edge？

2) 我该怎么做才能解决这个问题？

Answer 1

这个问题是由于我错误编码 HTML 将新行附加到摘要 table。

之前我附加了每个新行，例如

if (jobName[1]) {
                  var newRow = "<tr><td></td><td>" + "Job Name" + "</td><td>" + jobName[1] + "</td></tr>" + tbody.append(newRow);
                }

正是这种错误编码导致了 IE8 和 IE9 中的问题。

我更改了代码，将新行和 tbody.append(newRow) 拆分为两个单独的语句，示例如下

if (jobName[1]) {
                var newRow = "<tr>" + "<td></td>" + "<td>" + "Job Name" + "</td><td>" + jobName[1] + "</td>" + "</tr>";
                tbody.append(newRow);
            }

和我的 "minified" window 现在可以在 IE8 > IE11、Microsoft Edge、Chrome 和 Firefox 中正确呈现。

Internet Explorer 兼容性 v9 和 v8 [object Object] ~ 附加

Internet Explorer Incompatibility v9 & v8 [object Object] ~ additional

javascript

jquery

internet-explorer-8

internet-explorer-9

twitter-bootstrap-3