下面我們接著上一篇繼續我們的Dom征程,在我的學習中,我感覺越學Dom越感覺非常的有意思,期待我們能夠共同學習。下面我們學習window對象的屬性,這個部落格我就專門針對我這段時間學習的window對象的屬性做個筆記。
- window對象的屬性1
(1) window.location.href=’http://www.baidu.com’,重新導航到新的地址,和navigate方法效果一樣,window.location.reload()重新整理頁面。
<input type="button" value="href" onclick="alert(location.href)" /> <!--擷取當前的地址-->
<input type="button" value="重新導向" onclick="location.href='http://www.baidu.com'" />
<input type="button" value="重新整理" onclick="location.reload()" />
(2) window.event是非常重要的屬性,用來擷取發生事件時的資訊,事件不局限於window對象的事件,所有元素的事件都可以通過event屬性擷取相關資訊,類似於Winform中的e(EventArg)。
1) altkey屬性,bool類型,表示發生事件時alt鍵是否被按下,類似的還有Ctrkey,Shiftkey屬性,例如:
<input type="button" value="點擊" onclick="if(event.CtrlKey){alert('Ctrl被點擊')}else{alert('隨便點擊')}" />
2) clientX,clientY發生事件時滑鼠在客戶區的座標,screenX,ScreenY發生事件時滑鼠在螢幕上的座標,offsetX,offsetY發生事件時,滑鼠相當於事件來源(如點擊按鈕時觸發onclick)的座標。
3) returnValue屬性,如果將returnValue設定為false,就會取消預設事件的處理,在超連結的onclick裡面禁止訪問href的頁面,在表單校正的時候禁止提交表單到伺服器。
例1 <a href="http://www.baidu.com" onclick="alert('禁止訪問');window.event.returnValue=false;">百度</a>
例2 <form action="f1f2.htm">
<input type="submit" value="提交" onclick="alert('資料有問題');window.event.returnValue=false;" />
</form>
4) srcElement 獲得事件的來源物件
5) keyCode 發生事件時的按索引值
6) button 發生時間時滑鼠按鍵,1為左鍵,2為右鍵,3為左右鍵同時按。
<body onmousedown="if(event.button==2){alert('禁止複製')}">
注釋:禁止Button控制項上面內容的複製
(3) 例子:定時器走馬燈重寫,完美的方案
<title>這是一片文章的資訊是</title>
<script type="text/javascript">
function scroller() {
var title = document.title;
var lastCh = title.charAt(0); //容易錯
var leftStr = title.substring(1, title.length);
document.title = leftStr + lastCh;
}
</script>
<input type="button" value="滾動" onclick="timeId=setInterval('scroller()', 500)" />
<input type="button" value="停止(錯誤)" onclick="clearInterval(setInterval('scroller()', 500))" />
<input type="button" value="停止(正確)" onclick="clearInterval(timeId)" />
- window對象的屬性2
(1) screen對象,螢幕的資訊
<script type="text/javascript">
alert("解析度:" + screen.width + "*" + screen.height);
if (screen.width < 1037 || screen.height < 800) {
alert("解析度太低");
}
</script>
(2) clipboardData對象,對黏貼板的操作。clearData(“Text”)清空黏貼板,getData(“Text”)讀取黏貼板的值,傳回值為黏貼板中的內容,setData(“Text”,val)設定黏貼板的值。
<input type="button" value="分享本頁給好友" onclick="clipboardData.setData('Text','我發現了好玩的網頁!!'+location.href);alert('成功');" />
(3) 當複製的body的oncopy方法被觸發,直接return=false就是禁止複製
<body oncopy="alert('禁止複製');return false;">
(4) 很多元素也有oncopy,onpaste事件。
手機號碼<input type="text" /><br />
確認手機號碼:<input type="text" onpaste="alert('請勿黏貼');return false;" /><br />
(5) 在網站中複製文章的時候,為了防止那些拷貝黨不添加文章來源,自動在複製的內容後面添加著作權聲明。
<script type="text/javascript">
function modifyclipboard() {
clipboardData.setData('Text', clipboardData.getData('Text') + '本文來自部落格園——>Kencery' + location.href);
}
</script>
注釋:oncopy=”setTimeout(‘modifyclipboard()’,100)”。使用者複製動作發生0.1秒以後再去改黏貼板中的內容,100ms是一個經常取值,寫1000,10,50,20…….都不能直接在oncopy裡面修改黏貼板。
不能直接在oncopy中執行對黏貼板的操作,因此設定定時器,0.1秒以後執行,這樣就不在copy的執行調用佔用了。
function modifyclipboard1() {
var txt = clipboardData.getData('Text');
txt = txt + ",本文來自部落格園——>Kencery:" + location.href;
clipboardData.setData('Text', txt);
}
<body oncopy="setTimeout('modifyclipboard1() ',100)">
毒蛇釘刺發生的說多少次風送斷腸聲生產方式測試說的
場發射才說的才是才說的cvs才說的長vdsc是調查vs<br />
</body>
- window對象的屬性3
(1) history操作記錄
1) window.history.back(1) 後退,window.history.forward() 前進。我們的代碼也可以用window.history.go(-1),window.history.go(1) 前進。
(2) 例如:建立兩個頁面
1) <a href="f1f2.htm">進入第二頁</a>
2) <a href="javascript:window.history.back()">後退</a>
<input type="button" value="後退" onclick="window.history.back()" />
至此,我的這篇部落格筆記也完成了,下篇我們將介紹document屬性。