Question

我正在创建一个页面来帮助诊断用户使用我们的网页遇到的问题（您知道，询问用户“您使用的是什么浏览器？”通常会导致“Internet”）。

此页面已经向我提交了所有HTTP标头，现在我正在尝试让JavaScript提供更多信息，所以我认为拥有用户的navigator JavaScript对象会很棒，我开始关注序列化它，以便我可以通过表格提交。

问题是我无法使用我所知道的任何JSON库序列化navigator对象，每个人都返回一个空对象（？！），所以我决定编写一个ad-hoc序列化程序。 / p>

您可以在此处找到代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function serialize (object) {
                var type = typeof object;
                if (object === null) {
                    return '"nullValue"';
                }
                if (type == 'string' || type === 'number' || type === 'boolean') {
                    return '"' + object + '"';
                }
                else if (type === 'function') {
                    return '"functionValue"';
                }
                else if (type === 'object') {
                    var output = '{';
                    for (var item in object) {
                        if (item !== 'enabledPlugin') {
                            output += '"' + item + '":' + serialize(object[item]) + ',';
                        }
                    }
                    return output.replace(/\,$/, '') + '}';
                }
                else if (type === 'undefined') {
                    return '"undefinedError"';
                }
                else {
                    return '"unknownTypeError"';
                }
            };
            $(document).ready(function () {
                $('#navigator').text(serialize(navigator));
            });
        </script>
        <style type="text/css">
            #navigator {
                font-family: monospaced;
            }
        </style>
        <title>Serialize</title>
    </head>
    <body>
        <h1>Serialize</h1>
        <p id="navigator"></p>
    </body>
</html>

此代码似乎在Firefox，Opera，Chrome和Safari中完美运行，但（显然）在Internet Explorer（至少版本8.0）中不起作用，它抱怨“对象不支持的属性或方法”在行for (var item in object) {。

您是否有任何关于如何修复代码或如何通过其他方式达到目标（序列化navigator对象）的提示？

解决方案（v 2.0）：

替换

for (var item in object) {
    if (item !== 'enabledPlugin') {
        output += '"' + item + '":' + serialize(object[item]) + ',';
    }
}

与

for (var item in object) {
    try {
        if (item !== 'enabledPlugin') {
            output += '"' + item + '":' + serialize(object[item]) + ',';
        }
    }
    catch (e) {
    }
}

它有效。

Answer 1

尝试将其放入新对象

var _navigator = {};
for (var i in navigator) _navigator[i] = navigator[i];

然后序列化它（如果浏览器没有本机JSON API，可能使用一些JSON库，我使用json2.js）：

$('#navigator').text(JSON.stringify(_navigator));

修改：似乎Internet Explorer不允许navigator.plugins和navigator.mimeTypes进行迭代，因此可以正常运行：

var _navigator = {};
for (var i in navigator) _navigator[i] = navigator[i];

delete _navigator.plugins;
delete _navigator.mimeTypes;

$('#navigator').text(JSON.stringify(_navigator));

Answer 2

接受答案中的

JSON仅包含顶级元素。签出https://jsfiddle.net/j1zb7qm0/-_navigator.connection为空。我写了一个小的func来收集所有嵌套的属性：

function recur(obj) {
  var result = {}, _tmp;
  for (var i in obj) {
    // enabledPlugin is too nested, also skip functions
    if (i === 'enabledPlugin' || typeof obj[i] === 'function') {
        continue;
    } else if (typeof obj[i] === 'object') {
        // get props recursively
        _tmp = recur(obj[i]);
        // if object is not {}
        if (Object.keys(_tmp).length) {
            result[i] = _tmp;
        }
    } else {
        // string, number or boolean
        result[i] = obj[i];
    }
  }
  return result;
}

您可以像var _navigator = recur(navigator)这样使用它，也可以创建自己的包装器。实际上，您可以使用它来迭代并复制任何嵌套对象。

序列化JavaScript导航器对象

2 个答案: