IE6789瀏覽器使用console.log類似的方法輸出調試內容但又不影響頁面正常運行


問題來源:外網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(),兼容幾乎所有瀏覽器的代碼

/ 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 is undefined, 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 the DIV (unless there is another element with that ID) and you can style the console using that. The preset CSS fauxconsole.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固定在瀏覽器可見區域右上角,背景為灰色。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM