JS解決IE使用JSON.stringify報(bào)JSON未定義錯(cuò)誤的問(wèn)題

更新時(shí)間：2025年06月05日 15:42:21 作者：牛肉胡辣湯

在IE6,IE7,IE8這些老版本的瀏覽器中,原生并不支持JSON對(duì)象,這導(dǎo)致了在使用??JSON.stringify??時(shí)會(huì)遇到JSON未定義的錯(cuò)誤,下面我們就來(lái)看看如何解決這一錯(cuò)誤吧

在Web開(kāi)發(fā)中，JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成。??JSON.stringify?? 和 ??JSON.parse?? 是JavaScript中用于處理JSON數(shù)據(jù)的兩個(gè)非常重要的方法。然而，在IE6、IE7、IE8這些老版本的瀏覽器中，原生并不支持JSON對(duì)象，這導(dǎo)致了在使用??JSON.stringify??時(shí)會(huì)遇到“JSON未定義”的錯(cuò)誤。

本文將介紹如何通過(guò)引入第三方庫(kù)來(lái)解決這個(gè)問(wèn)題，確保你的應(yīng)用能夠在這些舊版瀏覽器中正常運(yùn)行。

問(wèn)題背景

JSON對(duì)象的瀏覽器支持情況

現(xiàn)代瀏覽器：如Chrome、Firefox、Safari等，都內(nèi)置了對(duì)JSON對(duì)象的支持。

IE9及以上版本：也已經(jīng)內(nèi)置了對(duì)JSON對(duì)象的支持。

IE6、IE7、IE8：這些版本的IE瀏覽器沒(méi)有內(nèi)置JSON對(duì)象，因此直接使用??JSON.stringify??或??JSON.parse??會(huì)導(dǎo)致錯(cuò)誤。

錯(cuò)誤示例

假設(shè)你有如下JavaScript代碼：

var obj = { name: "張三", age: 25 };
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 在IE6/7/8中會(huì)報(bào)錯(cuò)

在IE6、IE7、IE8中運(yùn)行這段代碼時(shí)，會(huì)出現(xiàn)“JSON未定義”的錯(cuò)誤，因?yàn)檫@些瀏覽器不支持JSON對(duì)象。

解決方案

為了使上述代碼能在IE6、IE7、IE8中正常工作，我們可以引入一個(gè)名為??json2.js??的腳本文件。這個(gè)腳本文件由Douglas Crockford編寫(xiě)，它為不支持JSON對(duì)象的瀏覽器提供了一個(gè)兼容性實(shí)現(xiàn)。

引入??json2.js??

下載??json2.js???：你可以從??Douglas Crockford的GitHub倉(cāng)庫(kù)??下載??json2.js??文件。

引入到項(xiàng)目中：將下載的??json2.js??文件添加到你的項(xiàng)目中，并在HTML文件中通過(guò)??<script>??標(biāo)簽引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON Polyfill Example</title>
    <script src="path/to/json2.js"></script>
</head>
<body>
    <script>
        var obj = { name: "張三", age: 25 };
        var jsonStr = JSON.stringify(obj);
        console.log(jsonStr); // 輸出: {"name":"張三","age":25}
    </script>
</body>
</html>

如何工作

當(dāng)你在頁(yè)面中引入??json2.js??后，如果瀏覽器本身不支持JSON對(duì)象，??json2.js??會(huì)自動(dòng)定義一個(gè)全局的??JSON??對(duì)象，并提供??JSON.stringify??和??JSON.parse??方法。這樣，即使在IE6、IE7、IE8中，你也可以安全地使用這兩個(gè)方法而不會(huì)遇到“JSON未定義”的錯(cuò)誤。

測(cè)試與驗(yàn)證

為了確保解決方案的有效性，你可以在不同的瀏覽器中測(cè)試上述代碼，特別是IE6、IE7、IE8。你可以使用工具如IETester或VirtualBox中的Windows XP系統(tǒng)來(lái)模擬這些舊版瀏覽器的環(huán)境。

方法補(bǔ)充

通過(guò)引入??json2.js??，我們可以在不支持JSON對(duì)象的瀏覽器中提供必要的兼容性支持，確保我們的應(yīng)用程序能夠跨瀏覽器穩(wěn)定運(yùn)行。在Internet Explorer 6、7、8（簡(jiǎn)稱(chēng)IE6-8）中，原生JavaScript并不支持??JSON??對(duì)象及其方法如??JSON.stringify()??和??JSON.parse()??。這會(huì)導(dǎo)致在這些瀏覽器中嘗試使用這些方法時(shí)出現(xiàn)“JSON未定義”錯(cuò)誤。為了解決這個(gè)問(wèn)題，可以使用一個(gè)名為??json2.js??的庫(kù)，它是由Douglas Crockford編寫(xiě)的，用于向不支持??JSON??對(duì)象的舊版瀏覽器添加??JSON??支持。

以下是如何在項(xiàng)目中引入并使用??json2.js??來(lái)解決IE6-8中??JSON.stringify??未定義問(wèn)題的示例：

下載 ?json2.js?? 文件：

你可以從Douglas Crockford的GitHub倉(cāng)庫(kù)下載??json2.js??文件：??https://github.com/douglascrockford/JSON-js??

或者直接復(fù)制粘貼以下內(nèi)容到一個(gè)名為??json2.js??的文件中：

// json2.js - JSON in JavaScript (http://www.json.org/js.html)
// Public Domain. No warranty.
// See http://www.JSON.org/js.html
 
/*jslint evil: true, strict: false, regexp: false */
 
/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply, call, charCodeAt, getUTCDate,
getUTCFullYear, getUTCHours, getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
lastIndexOf, length, parse, prototype, push, replace, slice, stringify, test, toJSON, toString,
value, write */
 
// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.
 
if (!this.JSON) {
    this.JSON = {};
}
 
(function () {
    "use strict";
 
    function f(n) {
        // Format integers to have at least two digits.
        return n < 10 ? '0' + n : n;
    }
 
    if (typeof Date.prototype.toJSON !== 'function') {
 
        Date.prototype.toJSON = function (key) {
 
            return isFinite(this.valueOf()) ?
                this.getUTCFullYear() + '-' +
                f(this.getUTCMonth() + 1) + '-' +
                f(this.getUTCDate()) + 'T' +
                f(this.getUTCHours()) + ':' +
                f(this.getUTCMinutes()) + ':' +
                f(this.getUTCSeconds()) + 'Z' : null;
        };
 
        String.prototype.toJSON =
            Number.prototype.toJSON =
                Boolean.prototype.toJSON = function (key) {
                    return this.valueOf();
                };
    }
 
    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
        gap,
        indent,
        meta = {    // table of character substitutions
            '\b': '\\b',
            '\t': '\\t',
            '\n': '\\n',
            '\f': '\\f',
            '\r': '\\r',
            '"': '\\"',
            '\\': '\\\\'
        },
        rep;
 
    function quote(string) {
        // If the string contains no control characters, no quote characters, and no
        // backslash characters, then we can safely slap some quotes around it.
        // Otherwise we must also replace the offending characters with safe escape
        // sequences.
        escapable.lastIndex = 0;
        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
            var c = meta[a];
            return typeof c === 'string' ? c :
                '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
        }) + '"' : '"' + string + '"';
    }
 
    function str(key, holder) {
        var i,          // The loop counter.
            k,          // The member key.
            v,          // The member value.
            length,
            mind = gap,
            partial,
            value = holder[key];
 
        // If the value has a toJSON method, call it to obtain a replacement value.
 
        if (value && typeof value === 'object' &&
                typeof value.toJSON === 'function') {
            value = value.toJSON(key);
        }
 
        // If we were called with a replacer function, then call the replacer to
        // obtain a replacement value.
 
        if (typeof rep === 'function') {
            value = rep.call(holder, key, value);
        }
 
        // What happens next depends on the value's type.
 
        switch (typeof value) {
        case 'string':
            return quote(value);
 
        case 'number':
 
            // JSON numbers must be finite. Encode non-finite numbers as null.
 
            return isFinite(value) ? String(value) : 'null';
 
        case 'boolean':
        case 'null':
 
            // If the value is a boolean or null, convert it to a string. Note:
            // typeof null does not produce 'null'. The case is included here in
            // the remote chance that this gets fixed someday.
 
            return String(value);
 
        // If the type is 'object', we might be dealing with an object or an array or
        // null.
 
        case 'object':
 
            // Due to a specification blunder in ECMAScript, typeof null is 'object',
            // so watch out for that case.
 
            if (!value) {
                return 'null';
            }
 
            // Make an array to hold the partial results of stringifying this object value.
 
            gap += indent;
            partial = [];
 
            // Is the value an array?
 
            if (Object.prototype.toString.apply(value) === '[object Array]') {
 
                // The value is an array. Stringify every element. Use null as a placeholder
                // for non-JSON values.
 
                length = value.length;
                for (i = 0; i < length; i += 1) {
                    partial[i] = str(i, value) || 'null';
                }
 
                // Join all of the elements together, separated with commas, and wrap them in
                // brackets.
 
                v = partial.length === 0 ? '[]' : gap ?
                    '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' :
                    '[' + partial.join(',') + ']';
                gap = mind;
                return v;
            }
 
            // If the replacer is an array, use it to select the members to be stringified.
 
            if (rep && typeof rep === 'object') {
                length = rep.length;
                for (i = 0; i < length; i += 1) {
                    if (typeof rep[i] === 'string') {
                        k = rep[i];
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
                        }
                    }
                }
            } else {
 
                // Otherwise, iterate through all of the keys in the object.
 
                for (k in value) {
                    if (Object.prototype.hasOwnProperty.call(value, k)) {
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
                        }
                    }
                }
            }
 
            // Join all of the member texts together, separated with commas,
            // and wrap them in braces.
 
            v = partial.length === 0 ? '{}' : gap ?
                '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' :
                '{' + partial.join(',') + '}';
            gap = mind;
            return v;
        }
    }
 
    // If the JSON object does not yet have a stringify method, give it one.
 
    if (typeof JSON.stringify !== 'function') {
        JSON.stringify = function (value, replacer, space) {
 
            // The stringify method takes a value and an optional replacer, and an optional
            // space parameter, and returns a JSON text. The replacer can be a function
            // that can replace values, or an array of strings that will select the keys.
            // A default replacer method can be provided. Use of the space parameter can
            // produce text that is more easily readable.
 
            var i;
            gap = '';
            indent = '';
 
            // If the space parameter is a number, make an indent string containing that
            // many spaces.
 
            if (typeof space === 'number') {
                for (i = 0; i < space; i += 1) {
                    indent += ' ';
                }
 
            // If the space parameter is a string, it will be used as the indent string.
 
            } else if (typeof space === 'string') {
                indent = space;
            }
 
            // If there is a replacer, it must be a function or an array.
            // Otherwise, throw an error.
 
            rep = replacer;
            if (replacer && typeof replacer !== 'function' &&
                    (typeof replacer !== 'object' ||
                    typeof replacer.length !== 'number')) {
                throw new Error('JSON.stringify');
            }
 
            // Make a fake root object containing our value under the key of ''.
            // Return the result of stringifying the value.
 
            return str('', {'': value});
        };
    }
 
    // If the JSON object does not yet have a parse method, give it one.
 
    if (typeof JSON.parse !== 'function') {
        JSON.parse = function (text, reviver) {
 
            // The parse method takes a text and an optional reviver function, and returns
            // the JavaScript value represented by the text. If a reviver function is provided,
            // then each of the keys and values in the resulting structure are processed before
            // being returned.
 
            var j;
 
            function walk(holder, key) {
                var k, v, value = holder[key];
                if (value && typeof value === 'object') {
                    for (k in value) {
                        if (Object.prototype.hasOwnProperty.call(value, k)) {
                            v = walk(value, k);
                            if (v !== undefined) {
                                value[k] = v;
                            } else {
                                delete value[k];
                            }
                        }
                    }
                }
                return reviver.call(holder, key, value);
            }
 
            // Parsing happens in four stages. In the first stage, we replace certain
            // Unicode characters with escape sequences. JavaScript handles many characters
            // incorrectly, either silently deleting them, or treating them as line endings.
 
            text = String(text);
            cx.lastIndex = 0;
            if (cx.test(text)) {
                text = text.replace(cx, function (a) {
                    return '\\u' +
                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
                });
            }
 
            // In the second stage, we run the text against regular expressions that look
            // for non-JSON patterns. We are especially concerned with '()' and 'new'
            // because they can cause invocation, and '=' because it can cause mutation.
            // But just to be safe, we want to reject all unexpected forms.
 
            // We split the second stage into 4 regexp operations in order to work around
            // crippling inefficiencies in IE's and Safari's regexp engines. First we
            // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
            // replace all simple value tokens with ']' characters. Third, we delete all
            // open brackets that follow a colon or comma or that begin the text. Finally,
            // we look to see that the remaining characters are only whitespace or ']' or
            // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
 
            if (/^[\],:{}\s]*$/
                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
 
                // In the third stage we use the eval function to compile the text into a
                // JavaScript structure. The '{' operator is subject to a syntactic ambiguity
                // in JavaScript: it can begin a block or an object literal. We wrap the text
                // in parens to eliminate the ambiguity.
 
                j = eval('(' + text + ')');
 
                // In the optional fourth stage, we recursively process the new structure,
                // passing each name/value pair to a reviver function for possible
                // transformation.
 
                return typeof reviver === 'function' ?
                    walk({'': j}, '') : j;
            }
 
            // If the text is not JSON parseable, then a SyntaxError is thrown.
 
            throw new SyntaxError('JSON.parse');
        };
    }
}());

在HTML文件中引入 ??json2.js???：確保在使用??JSON.stringify??或??JSON.parse??之前加載了??json2.js??。例如，在你的HTML文件中加入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON Test</title>
    <script src="path/to/json2.js"></script>
</head>
<body>
    <script>
        var data = { name: "John", age: 30, city: "New York" };
        var jsonStr = JSON.stringify(data);
        console.log(jsonStr); // 輸出: {"name":"John","age":30,"city":"New York"}
    </script>
</body>
</html>

通過(guò)以上步驟，你可以在IE6-8中安全地使用??JSON.stringify??和??JSON.parse??方法。??json2.js??會(huì)自動(dòng)檢測(cè)瀏覽器是否支持??JSON??對(duì)象，并在不支持的情況下提供必要的實(shí)現(xiàn)。在Internet Explorer 6、7 和 8（簡(jiǎn)稱(chēng) IE6-8）中，原生的 JavaScript 并不支持 ??JSON?? 對(duì)象，因此直接使用 ??JSON.stringify()?? 或 ??JSON.parse()?? 會(huì)拋出 ??JSON is not defined?? 的錯(cuò)誤。為了解決這個(gè)問(wèn)題，可以采用以下幾種方法：

方法一：使用 JSON2.js

??JSON2.js?? 是由 Douglas Crockford 編寫(xiě)的腳本，它為那些不支持原生 ??JSON?? 對(duì)象的瀏覽器提供了 ??JSON?? 對(duì)象的支持。你可以通過(guò)引入這個(gè)腳本來(lái)解決 IE6-8 中 ??JSON?? 未定義的問(wèn)題。

引入 JSON2.js

下載 JSON2.js：你可以從 ??這里?? 下載 ??json2.js?? 文件。

引入到項(xiàng)目中：將 ??json2.js?? 文件添加到你的項(xiàng)目中，并在需要使用 ??JSON?? 功能的頁(yè)面中引入它。

<script src="path/to/json2.js"></script>

使用示例

var data = { name: "John", age: 30 };
var jsonString = JSON.stringify(data);
console.log(jsonString); // 輸出: {"name":"John","age":30}
 
var parsedData = JSON.parse(jsonString);
console.log(parsedData); // 輸出: Object { name: "John", age: 30 }

方法二：條件加載 JSON2.js

為了提高性能，可以在檢測(cè)到瀏覽器不支持 ??JSON?? 對(duì)象時(shí)再加載 ??json2.js??。這可以通過(guò) JavaScript 來(lái)實(shí)現(xiàn)。

<script>
    if (typeof JSON === 'undefined' || typeof JSON.stringify !== 'function') {
        document.write('<script src="path/to/json2.js"><\/script>');
    }
</script>

方法三：手動(dòng)實(shí)現(xiàn) JSON.stringify 和 JSON.parse

如果你不想依賴(lài)外部庫(kù)，也可以手動(dòng)實(shí)現(xiàn) ??JSON.stringify?? 和 ??JSON.parse?? 的基本功能。但這通常不推薦，因?yàn)槭謩?dòng)實(shí)現(xiàn)可能會(huì)遺漏一些邊緣情況和安全性問(wèn)題。

基本實(shí)現(xiàn)

if (typeof JSON === 'undefined') {
    JSON = {};
}
 
if (typeof JSON.stringify !== 'function') {
    JSON.stringify = function (obj) {
        var t = typeof (obj);
        if (t != "object" || obj === null) {
            // simple data type
            if (t == "string") obj = '"'+obj+'"';
            return String(obj);
        } else {
            // recurse array or object
            var n, v, json = [], arr = (obj && obj.constructor == Array);
            for (n in obj) {
                v = obj[n]; t = typeof(v);
                if (t == "string") v = '"'+v+'"';
                else if (t == "object" && v !== null) v = JSON.stringify(v);
                json.push((arr ? "" : '"' + n + '":') + String(v));
            }
            return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
        }
    };
}
 
if (typeof JSON.parse !== 'function') {
    JSON.parse = function (text) {
        return eval("(" + text + ")");
    };
}

總結(jié)

對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，使用 ??JSON2.js?? 是最簡(jiǎn)單且最可靠的方法來(lái)解決 IE6-8 中 ??JSON?? 未定義的問(wèn)題。這種方法不僅簡(jiǎn)單易用，而且已經(jīng)經(jīng)過(guò)廣泛的測(cè)試，能夠處理各種復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。如果你有特殊需求或性能考慮，可以選擇條件加載或手動(dòng)實(shí)現(xiàn)。

到此這篇關(guān)于JS解決IE使用JSON.stringify報(bào)JSON未定義錯(cuò)誤的問(wèn)題的文章就介紹到這了,更多相關(guān)JS解決報(bào)JSON未定義錯(cuò)誤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: