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

【问题标题】：Internet Explorer Incompatibility v9 & v8 [object Object] ~ additionalInternet Explorer 兼容性 v9 和 v8 [object Object] ~ 附加
【发布时间】：2017-01-01 16:59:14
【问题描述】：

我正在开发一个仪表板项目，其中的一个组件在仪表板上的“缩小”窗口中显示一个汇总表，用户输入查询参数以生成特定报告。

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

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

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

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

流程如下

1) 我通过将存储的输入变量传递给服务器来填充表，并返回带有结果的 JSON 对象

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

2）然后我将变量“剥离”到特定对象中

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) 然后我测试包含数据的对象，即不为空，并将它们作为一行附加到汇总表正文中，下面是一个示例

 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) 我能做些什么来解决这个问题？

【问题讨论】：

我建议花一些时间进行调试（IE9 内置了调试器）或至少做足够的工作来创建带有可运行现场示例的minimal reproducible example（使用 Stack Snippets、<> 工具栏按钮）。

标签： javascript jquery twitter-bootstrap-3 internet-explorer-8 internet-explorer-9

【解决方案1】：

这个问题是由于我没有对 HTML 进行编码以将新行附加到汇总表。

之前我将每个新行添加为

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);
            }

我的“缩小”窗口现在可以在 IE8 > IE11、Microsoft Edge、Chrome 和 Firefox 中正确呈现。

【讨论】：