现在的web的js开发很方便啊,但是碰到iframe里的东西还是不方便看到变量的内容,所以就写了这么个看json内容的玩意,还可以当控制台输出用。
很简单,有需要以后开发新功能
/**
* Show json in a new page.(For debug)
*
* Licensed under the MIT or GPL Version 3 licenses.
* @version 1.3
* @author OWenT
* @link http://www.owent.net
* @history
* 2012.12.27
* 1. 改进JSON内对象循环引用时的导致的栈溢出问题
* 2. 引入层级路径
* 3. 引入锚点
*/
/**
* Object转为字符串
* @param {Object} json Object对象
* @param {Number} tab 缩进数量
* @param {Object} rules 应用规则
* @param {String} path 当前路径
* @return 生成的HTML
*/
function json2String(json, tab, rules, path) {
var tabStr = "", singleTab = " ", isClear = false;
var txt = "";
if (!rules) {
rules = {
id: "__json2string_process" + (new Date).getTime().toString() + (json2String.baseIndex ++),
objs: []
};
isClear = true;
}
tab = tab || 1;
if (!path) {
path = "{ROOT}";
txt += "<a name=\"" + rules.id + "." + path + "\"> </a>";
}
for (var i = 0; i < tab; i ++) {
tabStr += singleTab;
}
if (!json && json !== 0) {
txt += '<span style="color: Red;">null</span>';
} else if (typeof(json) == "object") {
var prefix = '<span style="color: DarkGray; font-weight: bolder;">{</span>', suffix = '<span style="color: DarkGray; font-weight: bolder;">}</span>';
try {
if (toString.call(json).match(/array/i)) {
prefix = '<span style="color: Orange;">[</span>';
suffix = '<span style="color: Orange;">]</span>';
}
} catch(e) {
// hoho ...
}
if (json[rules.id]) {
txt += prefix + "此处引用 <a style=\"text-decoration: underline; color: Blue;\" href=\"#" + rules.id + "." + json[rules.id] + "\" target=\"_self\" title=\"跳转到引用 " + json[rules.id] + "\" >" +
json[rules.id] + "</a>" + suffix;
return txt;
}
json[rules.id] = path;
rules.objs.push(json);
txt += prefix + "<br />\r\n";
var first = true;
for (var key in json) {
if (key == rules.id)
continue;
if (first)
first = false;
else
txt += ",<br />\r\n";
txt += tabStr + "<a name=\"" + rules.id + "." + path + "." + key + "\"> </a>" + "<strong>" +
key + "</strong> : " + json2String(json[key], tab + 1, rules, path + "." + key);
}
txt += "<br />\r\n" + tabStr.substr(0, tabStr.length - singleTab.length) + suffix;
} else if (typeof(json) == "string") {
txt += '<span style="color: Green;">"' + json + '"</span>';
} else if (typeof(json) == "number") {
txt += '<span style="color: Blue;">' + json + '</span>';
} else if (typeof(json) == "function") {
txt += '<span style="color: Purple;">' + json + '</span>';
} else {
txt += json.toString();
}
if (isClear) {
for (var i = 0; i < rules.objs.length; ++ i) {
delete rules.objs[i][rules.id];
}
rules.objs = [];
}
return txt;
}
function showJson(json, title, windowName, dlg_opt) {
json2String.baseIndex = json2String.baseIndex || 0;
title = title || "Json viewer";
windowName = windowName || "result" + (new Date()).toGMTString();
if (window.jQuery && jQuery.fn && jQuery.fn.dialog) {
$("<div></div>").append(json2String(json)).css({
"text-align": "left"
}).dialog($.extend({
"modal": false,
"title": title,
"width": 640,
"height": 480,
"buttons": {
"关闭": function() {
$( this ).dialog( "close" );
}
}
}, dlg_opt));
} else {
var wnd = window.open("about:blank", "_blank", "height=600, width=800, toolbar=no, menubar=no, resizable=yes, location=no, status=no", true);
if (!wnd)
alert("窗口被拦截!");
wnd.document.write("<!DOCTYPE html><html><head><title>" + title + "</title></head><body>" + json2String(json) + "</body></html>");
}
return wnd;
}
- 更新对不同类型着色
- 如果载入了jQuery UI 则使用jQuery UI的Dialog打开,用于解决嵌套iframe时浏览器拦截问题
- 解决Object循环引用时栈溢出问题,同时增加引用的指向锚点
Licensed under the MIT or GPL Version 3 licenses.