壓縮不僅僅可以提高用戶的下載速度,同時還可以加密代碼,下面說下一個常用的js壓縮方法:
首先使用dojo的工具shrinksafe(http://shrinksafe.dojotoolkit.org/)壓縮一下,dojo的這個工具會去掉注釋,他的壓縮不是簡單的替換變量,而是利用了mozilla的一個工具,對js解析后才壓縮,確保壓縮后的代碼不會出錯。
dojo壓縮后,并不會減少太多,下一步可以使用http://javascriptcompressor.com/這個站點進行更高層次的壓縮,可惜只能登陸這個站點再壓縮,只能將你的js代碼復制的他的文本框,然后等他的壓縮輸出
經過這2步,你的js會變得既安全,文件又小
===========================
壓縮JS代碼:
packer – 最好用的 javascript 壓縮工具
地址:
http://dean.edwards.name/packer/
http://kan.willin.org/?page_id=1288
恢復JSMIN等工具壓縮的JS代碼:
Javascript Beautifier能夠將jsmin壓縮后的js文件內容重新恢復成可讀性很好的js文件。
網頁版:http://jsbeautifier.org
事件 | 瀏覽器支持 | 描述 |
onClick | IE3|N2|O3 | 鼠標點擊事件,多用在某個對象控制的范圍內的鼠標點擊 |
onDblClick | IE4|N4|O | 鼠標雙擊事件 |
onMouseDown | IE4|N4|O | 鼠標上的按鈕被按下了 |
onMouseUp | IE4|N4|O | 鼠標按下后,松開時激發的事件 |
onMouseOver | IE3|N2|O3 | 當鼠標移動到某對象范圍的上方時觸發的事件 |
onMouseMove | IE4|N4|O | 鼠標移動時觸發的事件 |
onMouseOut | IE4|N3|O3 | 當鼠標離開某對象范圍時觸發的事件 |
onKeyPress | IE4|N4|O | 當鍵盤上的某個鍵被按下并且釋放時觸發的事件.[注意:頁面內必須有被聚焦的對象] |
onKeyDown | IE4|N4|O | 當鍵盤上某個按鍵被按下時觸發的事件[注意:頁面內必須有被聚焦的對象] |
onKeyUp | IE4|N4|O | 當鍵盤上某個按鍵被按放開時觸發的事件[注意:頁面內必須有被聚焦的對象] |
事件 | 瀏覽器支持 | 描述 |
onAbort | IE4|N3|O | 圖片在下載時被用戶中斷 |
onBeforeUnload | IE4|N|O | 當前頁面的內容將要被改變時觸發的事件 |
onError | IE4|N3|O | 捕抓當前頁面因為某種原因而出現的錯誤,如腳本錯誤與外部數據引用的錯誤 |
onLoad | IE3|N2|O3 | 頁面內空完成傳送到瀏覽器時觸發的事件,包括外部文件引入完成 |
onMove | IE|N4|O | 瀏覽器的窗口被移動時觸發的事件 |
onResize | IE4|N4|O | 當瀏覽器的窗口大小被改變時觸發的事件 |
onScroll | IE4|N|O | 瀏覽器的滾動條位置發生變化時觸發的事件 |
onStop | IE5|N|O | 瀏覽器的停止按鈕被按下時觸發的事件或者正在下載的文件被中斷 |
onUnload | IE3|N2|O3 | 當前頁面將被改變時觸發的事件 |
事件 | 瀏覽器支持 | 描述 |
onBlur | IE3|N2|O3 | 當前元素失去焦點時觸發的事件 [鼠標與鍵盤的觸發均可] |
onChange | IE3|N2|O3 | 當前元素失去焦點并且元素的內容發生改變而觸發的事件 [鼠標與鍵盤的觸發均可] |
onFocus | IE3|N2|O3 | 當某個元素獲得焦點時觸發的事件 |
onReset | IE4|N3|O3 | 當表單中RESET的屬性被激發時觸發的事件 |
onSubmit | IE3|N2|O3 | 一個表單被遞交時觸發的事件 |
事件 | 瀏覽器支持 | 描述 |
onBounce | IE4|N|O | 在Marquee內的內容移動至Marquee顯示范圍之外時觸發的事件 |
onFinish | IE4|N|O | 當Marquee元素完成需要顯示的內容后觸發的事件 |
onStart | IE4|N|O | 當Marquee元素開始顯示內容時觸發的事件 |
事件 | 瀏覽器支持 | 描述 |
onBeforeCopy | IE5|N|O | 當頁面當前的被選擇內容將要復制到瀏覽者系統的剪貼板前觸發的事件 |
onBeforeCut | IE5|N|O | 當頁面中的一部分或者全部的內容將被移離當前頁面[剪貼]并移動到瀏覽者的系統剪貼板時觸發的事件 |
onBeforeEditFocus | IE5|N|O | 當前元素將要進入編輯狀態 |
onBeforePaste | IE5|N|O | 內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發的事件 |
onBeforeUpdate | IE5|N|O | 當瀏覽者粘貼系統剪貼板中的內容時通知目標對象 |
onContextMenu | IE5|N|O | 當瀏覽者按下鼠標右鍵出現菜單時或者通過鍵盤的按鍵觸發頁面菜單時觸發的事件 [試試在頁面中的<body>中加入onContentMenu="return false"就可禁止使用鼠標右鍵了] |
onCopy | IE5|N|O | 當頁面當前的被選擇內容被復制后觸發的事件 |
onCut | IE5|N|O | 當頁面當前的被選擇內容被剪切時觸發的事件 |
onDrag | IE5|N|O | 當某個對象被拖動時觸發的事件 [活動事件] |
onDragDrop | IE|N4|O | 一個外部對象被鼠標拖進當前窗口或者幀 |
onDragEnd | IE5|N|O | 當鼠標拖動結束時觸發的事件,即鼠標的按鈕被釋放了 |
onDragEnter | IE5|N|O | 當對象被鼠標拖動的對象進入其容器范圍內時觸發的事件 |
onDragLeave | IE5|N|O | 當對象被鼠標拖動的對象離開其容器范圍內時觸發的事件 |
onDragOver | IE5|N|O | 當某被拖動的對象在另一對象容器范圍內拖動時觸發的事件 |
onDragStart | IE4|N|O | 當某對象將被拖動時觸發的事件 |
onDrop | IE5|N|O | 在一個拖動過程中,釋放鼠標鍵時觸發的事件 |
onLoseCapture | IE5|N|O | 當元素失去鼠標移動所形成的選擇焦點時觸發的事件 |
onPaste | IE5|N|O | 當內容被粘貼時觸發的事件 |
onSelect | IE4|N|O | 當文本內容被選擇時的事件 |
onSelectStart | IE4|N|O | 當文本內容選擇將開始發生時觸發的事件 |
事件 | 瀏覽器支持 | 描述 |
onAfterUpdate | IE4|N|O | 當數據完成由數據源到對象的傳送時觸發的事件 |
onCellChange | IE5|N|O | 當數據來源發生變化時 |
onDataAvailable | IE4|N|O | 當數據接收完成時觸發事件 |
onDatasetChanged | IE4|N|O | 數據在數據源發生變化時觸發的事件 |
onDatasetComplete | IE4|N|O | 當來子數據源的全部有效數據讀取完畢時觸發的事件 |
onErrorUpdate | IE4|N|O | 當使用onBeforeUpdate事件觸發取消了數據傳送時,代替onAfterUpdate事件 |
onRowEnter | IE5|N|O | 當前數據源的數據發生變化并且有新的有效數據時觸發的事件 |
onRowExit | IE5|N|O | 當前數據源的數據將要發生變化時觸發的事件 |
onRowsDelete | IE5|N|O | 當前數據記錄將被刪除時觸發的事件 |
onRowsInserted | IE5|N|O | 當前數據源將要插入新數據記錄時觸發的事件 |
事件 | 瀏覽器支持 | 描述 |
onAfterPrint | IE5|N|O | 當文檔被打印后觸發的事件 |
onBeforePrint | IE5|N|O | 當文檔即將打印時觸發的事件 |
onFilterChange | IE4|N|O | 當某個對象的濾鏡效果發生變化時觸發的事件 |
onHelp | IE4|N|O | 當瀏覽者按下F1或者瀏覽器的幫助選擇時觸發的事件 |
onPropertyChange | IE5|N|O | 當對象的屬性之一發生變化時觸發的事件 |
onReadyStateChange | IE4|N|O | 當對象的初始化屬性值發生變化時觸發的事件 |
//獲取可見區域 寬度 高度
availWidth = parseInt(document.body.clientWidth);
availHeight = parseInt(document.body.clientHeight);
可見區域高度:document.body.clientHeight
總高度:document.body.scrollHeight
可見區域寬度:document.body.clientWidth
總寬度:document.body.scrollWidth
==============================================================
var getWindowInfo=function()
{
var scrollX=0,scrollY=0,width=0,height=0,contentWidth=0,contentHeight=0;
if(typeof(window.pageXOffset)=='number')
{
scrollX=window.pageXOffset;
scrollY=window.pageYOffset;
}
else if(document.body&&(document.body.scrollLeft||document.body.scrollTop))
{
scrollX=document.body.scrollLeft;
scrollY=document.body.scrollTop;
}
else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop))
{
scrollX=document.documentElement.scrollLeft;
scrollY=document.documentElement.scrollTop;
}
if(typeof(window.innerWidth)=='number')
{
width=window.innerWidth;
height=window.innerHeight;
}
else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
{
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
{
width=document.body.clientWidth;
height=document.body.clientHeight;
}
if(document.documentElement&&(document.documentElement.scrollHeight||document.documentElement.offsetHeight))
{
if(document.documentElement.scrollHeight>document.documentElement.offsetHeight){
contentWidth=document.documentElement.scrollWidth;
contentHeight=document.documentElement.scrollHeight;
}
else
{
contentWidth=document.documentElement.offsetWidth;
contentHeight=document.documentElement.offsetHeight;
}
}
else if(document.body&&(document.body.scrollHeight||document.body.offsetHeight))
{
if(document.body.scrollHeight>document.body.offsetHeight)
{
contentWidth=document.body.scrollWidth;
contentHeight=document.body.scrollHeight;
}else{
contentWidth=document.body.offsetWidth;
contentHeight=document.body.offsetHeight;
}
}
else
{
contentWidth=width;
contentHeight=height;
}
if(height>contentHeight)
height=contentHeight;
if(width>contentWidth)
width=contentWidth;
var rect=new Object();
rect.ScrollX=scrollX;
rect.ScrollY=scrollY;
rect.Width=width;
rect.Height=height;
rect.ContentWidth=contentWidth;
rect.ContentHeight=contentHeight;
return rect;
}
格式:
<SCRIPT LANGUAGE="javascript">
<!--
window.open('index.htm','title','height=100,width=200,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
-->
</SCRIPT>
參數解釋如下:
'index.htm' 彈出窗口的目標文件名
'title' 彈出窗口的標題
height 彈出窗口的高度
width 彈出窗口的寬度
top 彈出窗口與屏幕上方的距離
left 彈出窗口與屏幕左側的距離
toolbar=no 是否顯示工具欄,如果顯示則為yes
menubar=no 是否顯示菜單欄,如果顯示則為yes
scrollbars=no 是否顯示滾動條,如果顯示則為yes
location=no 是否顯示地址欄,如果顯示則為yes
status=no 是否顯示狀態欄,如果顯示則為yes
resizable=no 是否允許改變窗口大小,如果允許則為yes