js 常見問題 3

(1)如何禁止f5重新整理

用浏覽器打開網頁時,我們按f5 就會重新整理目前網頁,那麼如何禁止f5重新整理呢?

// ie下禁用f5重新整理  

   document.onkeydown = function(){  

       if(window.event && window.event.keycode == 116){  

           window.event.keycode = 505;  

        }  

       if(window.event && window.event.keycode == 505){  

           return false;  

       }  

   };  

   $(document).keydown(function (event) {  

           // firefox下禁用f5重新整理  

           if(event.keycode == "116"){  

               event.keycode = "505";  

           }  

           if(event.keycode == 505) {  

               return false;  

       });  

(2)如何禁止選中文本

 對于ie 

window.onload=function()  

    {  

        var movespan222=$('#movespan');  

        //alert(movespan222);  

        drag(movespan222);  

        if(isietest){//當浏覽器是ie時  

            com.whuang.hsj.$$id('movespan').onselectstart=function()//禁止文本被選中  

            {  

                return false;  

            }  

    }  

 使文本所在控件的onselectstart 事件傳回false

對于火狐和谷歌浏覽器,使用css實作:

.cannot_select{  

    -moz-user-select:none;/*火狐*/  

    -webkit-user-select:none;/*webkit浏覽器*/  

    -ms-user-select:none;/*ie10*/  

    -khtml-user-select:none;/*早期浏覽器*/  

    user-select:none;  

}  

(3)擷取div的高度和寬度

var divobj;  

//擷取div對象  

divobj.offsetwidth;//div 的寬度  

divobj.offsetheight;//div 的高度  

 參考:

http://hw1287789687.iteye.com/blog/2151517

http://huangkunlun520.blog.51cto.com/2562772/1570707

//添加圖示  

   var h4_222=$('.condition h4');  

   //使用jquery 建立html控件  

   var imagecreate='<img class="togglecollapse" style="margin-top: 4px;" title="展開/收起" src="images/toggle-collapse.png">';  

   var toggleimg=$(imagecreate);  

   h4_222.append(toggleimg);  

(5)jquery 折疊和收起

<span style="line-height: 25.200000762939453px;"> var h4_list=$('.list_header');  

    var toggleimg_resultlist=$(imagecreate);  

    h4_list.append(toggleimg_resultlist);  

    toggleimg .toggle(function(){  

//        console.log($(this).parent().next());  

        var this22=$(this);  

        this22.parent(). next().slideup("normal",function(){  

//            alert(222);  

            this22.attr("src","images/toggle-expand.png");  

        });  

        // $(this).next().slidedown("slow");  

    },function(){  

        this22.parent().next().slidedown("normal",function(){  

//            alert(11);  

            this22 .attr("src","images/toggle-collapse.png");  

    });  

toggleimg_resultlist.toggle(function(){  

        h4_list.next().slideup("normal",function(){  

        h4_list.next().slidedown("normal",function(){  

    });</span>  

(6)擷取螢幕大小

(7)判斷js對象是否包含屬性

使用in

執行個體:

if((typeof name22 != 'string')&& ('value' in name22)){  

       // name22=name22.value;  

        return name22.value;  

if (!('length' in checkboxobj)) {// just only single checkbox .  

        return checkboxobj.checked;  

 (8)擷取字元串後面的數字

var input='ad3344aa';  

var result=input.replace(/[\a-za-z\s ]*[^\d](\d+)[^\d]?.*$/g, "$1");  

alert('cc'+result+'bb');  

 運作結果:

cc3344bb

(9)擷取浏覽器視窗大小

//跨浏覽器擷取視口大小  

function getinner() {  

    if (typeof window.innerwidth != 'undefined') {  

        return {  

            width : window.innerwidth,  

            height : window.innerheight  

    } else {  

            width : document.documentelement.clientwidth,  

            height : document.documentelement.clientheight  

 相容浏覽器ie7,8,9,火狐,chrome.

測試:

window.onload=function(){  

            alert(getinner().width);  

(10)擷取滾動條的位置

// 跨浏覽器擷取滾動條位置  

function getscroll(){  

    return {  

        top:document.documentelement.scrolltop || document.body.scrolltop,  

        left:document.documentelement.scrollleft || document.body.scrollleft  

相容浏覽器ie7,8,9,火狐,chrome. 

var abc=function(){  

          alert(document.documentelement.scrolltop+"\t:"+getscroll().top);  

        }