IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5787字,纯文字阅读大概需要9分钟。
内容图文
问题来源:外网IE下,触发js报错。经检测,未清除console造成。清除console后,解决。
问题原因:console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebugs 之后的 Firefox
所独有的调试“绝招”。 这一招,IE8 学会了,不过用起来比 Firebugs
麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
详细出处参考:http://www.jb51.net/article/30469.htm
解决问题:http://q.cnblogs.com/q/33770/
http://icant.co.uk/sandbox/fauxconsole/
1:Complete
cross-browser console.log(),兼容几乎所有浏览器的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/ Tell IE9 to use its built-
in
console
if
(Function.prototype.bind && console &&
typeof
console.log ==
"object"
) {
[
"log"
,
"info"
,
"warn"
,
"error"
,
"assert"
,
"dir"
,
"clear"
,
"profile"
,
"profileEnd"
]
.forEach(
function
(method) {
console[method] =
this
.call(console[method], console);
}, Function.prototype.bind);
}
// log() -- The complete, cross-browser (we don‘t judge!) console.log wrapper for his or her logging pleasure
if
(!window.log) {
window.log =
function
() {
log.history = log.history || [];
// store logs to an array for reference
log.history.push(arguments);
// Modern browsers
if
(
typeof
console != ‘undefined
‘ && typeof console.log == ‘
function
‘) {
// Opera 11
if (window.opera) {
var i = 0;
while (i < arguments.length) {
console.log("Item " + (i+1) + ": " + arguments[i]);
i++;
}
}
// All other modern browsers
else if ((Array.prototype.slice.call(arguments)).length == 1 && typeof Array.prototype.slice.call(arguments)[0] == ‘
string
‘) {
console.log( (Array.prototype.slice.call(arguments)).toString() );
}
else {
console.log( Array.prototype.slice.call(arguments) );
}
}
// IE8
else if (!Function.prototype.bind && typeof console != ‘
undefined
‘ && typeof console.log == ‘
object
‘) {
Function.prototype.call.call(console.log, console, Array.prototype.slice.call(arguments));
}
// IE7 and lower, and other old browsers
else {
// Inject Firebug lite
if (!document.getElementById(‘
firebug-lite
‘)) {
// Include the script
var script = document.createElement(‘
script
‘);
script.type = "text/javascript";
script.id = ‘
firebug-lite
‘;
// If you run the script locally, point to /path/to/firebug-lite/build/firebug-lite.js
script.src = ‘
https:
//getfirebug.com/firebug-lite.js‘;
// If you want to expand the console window by default, uncomment this line
//document.getElementsByTagName(‘HTML‘)[0].setAttribute(‘debug‘,‘true‘);
document.getElementsByTagName(‘HEAD
‘)[0].appendChild(script);
setTimeout(function () { log( Array.prototype.slice.call(arguments) ); }, 2000);
}
else {
// FBL was included but it hasn‘
t finished loading yet, so
try
again momentarily
setTimeout(
function
() { log( Array.prototype.slice.call(arguments) ); }, 500);
}
}
}
}
|
2:专门为ie下调试js用,Faux Console,使用方法:
2.1.引入css文件,及js文件
< link type ="text/css" rel ="stylesheet" href ="fauxconsole.css" />
<script type="text/javascript" src="fauxconsole.js"></script>
//fauxconsole.css
#fauxconsole{ position:absolute; top:0; right:0; width:300px; border:1px solid #999; font-family:courier,monospace; background:#eee; font-size:10px; padding:10px; } html>body #fauxconsole{ position:fixed; } #fauxconsole a{ float:right; padding-left:1em; padding-bottom:.5em; text-align:right; }
// fauxconsole.js /* Faux Console by Chris Heilmann http://wait-till-i.com */ if(!window.console){ var console={ init:function(){ console.d=document.createElement(‘div‘); document.body.appendChild(console.d); var a=document.createElement(‘a‘); a.href=‘javascript:console.hide()‘; a.innerHTML=‘close‘; console.d.appendChild(a); var a=document.createElement(‘a‘); a.href=‘javascript:console.clear();‘; a.innerHTML=‘clear‘;console.d.appendChild(a); var id=‘fauxconsole‘; if(!document.getElementById(id)){console.d.id=id;} console.hide(); },hide:function(){ console.d.style.display=‘none‘; },show:function(){ console.d.style.display=‘block‘; },log:function(o){ console.d.innerHTML+=‘<br/>‘+o;console.show(); },clear:function(){ console.d.parentNode.removeChild(console.d); console.init(); console.show(); },/*Simon Willison rules*/ addLoadEvent:function(func){ var oldonload=window.onload; if(typeof window.onload!=‘function‘){ window.onload=func; }else{ window.onload=function(){ if(oldonload){ oldonload(); } func(); } }; } }; console.addLoadEvent(console.init); }
- It
tests if there is a
console
object defined - if there is one this means your browser has a console and the script does nothing else.
//看看有没有console对象定义,如果浏览器定义了console,嘛也不做。
- If
console
isundefined
, the script creates a new console object and adds a DIV to the body of the document.
//如果没有定义console,fauxconsole.js创建一个console对象,同时在 body中增加一个DIV.
- It
adds a close and clear link to that
DIV
which allow you to hide or wipe the console.
//给新增的DIV增加一个关闭,清除链接,这样,你就能隐藏或者展开console对话。
- It provides you with the following methods:
//JS提供了以下功能:
-
console.log(message)
- adds message to the log //console.log(message)输出消息 -
console.show()
- shows the console //console.show() 展示console -
console.hide()
- hides the console//console.hide()隐藏console
- The
script adds the ID
fauxconsole
to theDIV
(unless there is another element with that ID) and you can style the console using that. The preset CSSfauxconsole.css
is pretty basic and shows the console as a grey box fixed to the top right corner of the viewport.
//JS代码增加了一个ID fauxconsole 给那个新增的DIV(文档中不要有重复的ID,若重复,必须更换另一个ID名),通过定义fauxconsole,控制console.在fauxconsole.css中,默认console box固定在浏览器可见区域右上角,背景为灰色。
原文:http://www.cnblogs.com/sxn104/p/sxn104.html
内容总结
以上是互联网集市为您收集整理的IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行全部内容,希望文章能够帮你解决IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。