(function() { //常量 var SPACE = " ", EMPTY = ""; //log使用的可配置信息 var config = { lock: false, //true:使用pre来存放显示内容,不默认去除空格、换行 codeStyle: false, //log的外部容器选项[html element],没啥效果,本来就是fix globalBody: document.body, //使用系统的debug bar useSysDebugBar: false } //设置运行参数 log.setConfig = function(_config) { if (!_config) return; for (var i in _config) { config[i] = _config[i]; } } //初始化运行参数 log.setConfig(config); function log(msg) { try { //合并log参数信息 msg = [].join.call(arguments, SPACE); if (config.lock) return; //ie下按f12后,console会作为有效对象 if (config.useSysDebugBar && window.console) { window.console.log(msg) } else { var guid = window.guid; if (!guid) { guid = window.guid = (Math.floor(Math.random() * 1E8) + 1); } var container = document.getElementById('log_' + guid), logContent = document.getElementById('log_content_' + guid); var styleid = "log_style_" + guid; if (!container) { //container container = document.createElement('div'); container.id = 'log_' + guid; //container.style.cssText = "position:fixed;_position:absolute;left:0px;bottom:0px;padding-bottom:0px;height:auto;border:none;background:#eee;width:100%;"; //?fixed在ie6不行,height:276px; //foot div 使log container不影响页面所有内容的可见,?在调节container的高度时,该foot div高度也要做相应调整 /*var footHeightDiv = document.createElement('div'); footHeightDiv.style.height = "280px"; document.body.appendChild(footHeightDiv);*/ //resize height var resizeH = document.createElement('div'); container.appendChild(resizeH); resizeH.style.cssText = "width:auto;height:3px;cursor:s-resize;border:none"; resizeH.onmousedown = function(e) { e = e || window.event; resizeH.resizeFlag = true; resizeH.y = e.clientY; //getCoords(resizeH).top; logContent.transHeight = logContent.offsetHeight; }; document.onmousemove = function(e) { if (resizeH.resizeFlag) { e = e || window.event; ! +"\v1" ? document.selection.empty() : window.getSelection().removeAllRanges(); var h = logContent.transHeight - (e.clientY - resizeH.y); //赋值height小于0时,se360报错 h = h >= 0 ? h : 0; logContent.style.height = h + "px"; } }; document.onmouseup = function() { resizeH.resizeFlag = false; }; //log bar var logBar = document.createElement('div'); logBar.id = "log_bar_" + guid; container.appendChild(logBar); //logBar.style.cssText = "margin-top:0px;border:none;border-top:1px solid #888;border-bottom:1px solid #888; background:#eee;width:auto;height:30px;"; //log content logContent = document.createElement('div'); logContent.id = 'log_content_' + guid; //logContent.style.cssText = "border:none;height:240px;overflow:auto;width:auto;"; //height:240px; container.appendChild(logContent); if (!log.styleHash) { var styleHash = {}; styleHash["#" + container.id] = "position:fixed;_position:absolute;left:0px;bottom:0px;padding-bottom:0px;height:auto;border:none;background:#eee;width:100%;"; styleHash["#" + logBar.id] = "margin-top:0px;border:none;border-top:1px solid #888;border-bottom:1px solid #888;background:#eee;width:auto;height:30px;"; styleHash["#" + logContent.id] = "border:none;height:240px;overflow:auto;width:auto;"; //height:240px; //添加logItem 样式 styleHash["#" + container.id + " .log_item"] = "border:none;font-size:12px;line-height:20px;width:auto;height:auto;margin:0; padding-left:12px;color:#000; border-bottom:1px solid #bbb;background:#fff;"; log.styleHash = styleHash; } //console.log(111222); //完成的container添加到页面dom树中,页面body未构建完成时添加会内存溢出 //?缓存log msg等待body可以后再添加,opera下,会很久未构造成功document.body var globalBody = config.globalBody || document.body; if (!globalBody) {// || typeof setCss == "undefined" if (!log.data) log.data = []; log.data.push(msg); return; } /** setCss * 异步加载的时候(同步时,页面构建完成后才开始执行js)需要dom ready 才能进行setCss判断,否则stack overflow * 同步时,如果未完成dom ready 也会stack overflow 需要确认dom ready * try, typeof xx==undefined */ if (typeof setCss == "undefined") { globalBody && globalBody.appendChild(container); } else { setCss(log.styleHash, styleid); log.styleHash = null; globalBody && globalBody.appendChild(container); } //animate logContent.style.height = "0px"; var _interval = setInterval(function() { if (parseInt(logContent.style.height, 10) < 240) { logContent.style.height = parseInt(logContent.style.height, 10) + 10 + "px"; } else { logContent.style.height = "240px"; clearInterval(_interval); } }, 20); } //setCss if has not if (log.styleHash && typeof setCss != "undefined") { setCss(log.styleHash, styleid); log.styleHash = null; } /**log item * pre中内容不会省略空格、换行等 */ if (!log.data) log.data = []; log.data.push(msg); var len = log.data.length; for (var i = 0; i < len; i++) { var logItem = document.createElement(config.codeStyle ? 'pre' : 'div'); //pre、div logItem.className = "log_item"; //logItem.style.cssText = "border:none;font-size:12px;line-height:20px;width:auto;height:auto;margin:0; padding-left:12px;color:#000; border-bottom:1px solid #bbb;background:#fff;"; //确保null等在chrome下可显示出来,加visibility防止错误信息为空字符不显示改行 logItem.innerHTML = log.data.shift() + '<span style="visibility:hidden;">""</span>'; logContent.appendChild(logItem); } } } catch (e) { log("<span style='color:red;'> Log Error:</span>" + e.message); //alert("log error:" + e.message); } } //添加对对象属性的log支持 var logobj = function(data, prefix, appendprefix, i) { i = i || 0; prefix = prefix || "####"; appendprefix = appendprefix || "####"; if (typeof data == "object") { for (var k in data) { log(i + appendprefix + k + "==>" + data[k]); if (typeof data[k] == "object") { arguments.callee(data[k], prefix, prefix + appendprefix, i + 1); } } } else { log(data); } } function setCss(hash, styleNodeId) { var _styleNode = document.getElementById(styleNodeId), _sheet = _styleNode ? (_styleNode.sheet || _styleNode.styleSheet) : null, _createStyleSheet = (function() { function createStyleSheet(__sheet__) { var sheet = null; if (!__sheet__) { var element = document.createElement('style'); element.type = 'text/css'; element.id = styleNodeId; //id document.getElementsByTagName('head')[0].appendChild(element); sheet = element.sheet || element.styleSheet; } else { sheet = __sheet__; } if (typeof sheet.addRule === 'undefined') {//ff sheet.addRule = function(selectorText, cssText, index) { if (typeof index === 'undefined') index = this.cssRules.length; this.insertRule(selectorText + ' {' + cssText + '}', index); }; } return sheet; } return createStyleSheet; })(); if (_sheet && _sheet.memory) { for (var key in hash) { if (!_styleNode.memory.exists(key, hash[key])) { _styleNode.memory.set(key, hash[key]); _sheet.addRule(key, hash[key]); } } } else { if (_sheet) { _sheet = _createStyleSheet(_sheet); } else { _sheet = _createStyleSheet(); } _styleNode = _sheet.ownerNode || _sheet.owningElement; var memory = function() { var keys = [], values = [], size = 0; return { get: function(k) { var results = []; for (var i = 0, l = keys.length; i < l; i++) { if (keys[i] == k) { results.push(values[i]) } } return results; }, exists: function(k, v) { var vs = this.get(k); for (var i = 0, l = vs.length; i < l; i++) { if (vs[i] == v) return true; } return false; }, set: function(k, v) { keys.push(k); values.push(v); size++; }, length: function() { return size; } } } _styleNode.memory = memory(); for (var key in hash) { _styleNode.memory.set(key, hash[key]); _sheet.addRule(key, hash[key]); } } } window.log = log; window.logobj=window.logObject = logobj; })();