當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

100_框架对象事件

發(fā)布時(shí)間：2025/5/22 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 100_框架对象事件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. onload事件

1.1. onload事件會(huì)在頁(yè)面或圖像加載完成后立即發(fā)生。

1.2. onload通常用于<body>元素, 在頁(yè)面完全載入后(包括圖片、css文件等等。)執(zhí)行腳本代碼。

1.3. 語(yǔ)法

1.3.1. 在html中:

1.3.2. 在JavaScript中:

window.onload=function(){SomeJavaScriptCode};

1.4. 以下html標(biāo)簽支持onload:

2. onbeforeunload事件

2.1. onbeforeunload事件在即將離開當(dāng)前頁(yè)面(刷新、關(guān)閉或頁(yè)面跳轉(zhuǎn))時(shí)觸發(fā)。

2.2. 該事件可用于清空頁(yè)面數(shù)據(jù)(注冊(cè)的事件、Cookies、localStorage存儲(chǔ)的數(shù)據(jù)等), 還有一個(gè)場(chǎng)景就是計(jì)算用戶使用網(wǎng)站的時(shí)間。

2.3. 語(yǔ)法

2.3.1. 在html中:

2.3.2. 在JavaScript中:

object.onbeforeunload=function(){myScript};

2.4. 以下html標(biāo)簽支持onbeforeunload:

<body>

3. onunload事件

3.1. onunload事件在用戶退出頁(yè)面時(shí)發(fā)生。

3.2. 該事件可用于清空頁(yè)面數(shù)據(jù)(注冊(cè)的事件、Cookies、localStorage存儲(chǔ)的數(shù)據(jù)等), 還有一個(gè)場(chǎng)景就是計(jì)算用戶使用網(wǎng)站的時(shí)間。

3.3. 語(yǔ)法

3.3.1. 在html中:

3.3.2. 在JavaScript中:

window.onunload=function(){SomeJavaScriptCode};

3.4. 以下html標(biāo)簽支持onunload:

4. 例子

4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onload、onbeforeunload和onunload事件</title></head><body><a href="https://www.baidu.com" target="_self">點(diǎn)擊跳轉(zhuǎn)到百度</a><br /><br /><button onclick="saveBeforeunloadData()">存儲(chǔ)一下onbeforeunload事件需要清空的數(shù)據(jù)</button> <button onclick="beforeunloadData()">顯示一下onbeforeunload事件需要清空的數(shù)據(jù)</button><br /><br /><button onclick="saveUnloadData()">存儲(chǔ)一下onunload事件需要清空的數(shù)據(jù)</button> <button onclick="unloadData()">顯示一下onunload事件需要清空的數(shù)據(jù)</button><p id="myP"></p><img src="button.png" onload="picLoaded()" /><script type="text/javascript">var myP = document.getElementById('myP');document.body.onload = function(e){myP.innerHTML += '文檔加載完成<br />';};function picLoaded(){myP.innerHTML += '圖片加載完成<br />';}function saveBeforeunloadData(){localStorage.setItem("onbeforeunload", "我是onbeforeunload事件需要清空的數(shù)據(jù)");}function saveUnloadData(){localStorage.setItem("onunload", "我是onunload事件需要清空的數(shù)據(jù)");}function beforeunloadData(){alert(localStorage.getItem("onbeforeunload"));}function unloadData(){alert(localStorage.getItem("onunload"));}// 所有的瀏覽器都支持onbeforeunload和onunload事件document.body.onbeforeunload = function(e){localStorage.setItem("onbeforeunload", null);};document.body.onunload = function(e){localStorage.setItem("onunload", null);};</script></body> </html>

4.2. 效果圖

5. onresize事件

5.1. onresize事件會(huì)在窗口或框架被調(diào)整大小時(shí)發(fā)生。

5.2. 語(yǔ)法

5.2.1. html中:

5.2.2. JavaScript中:

window.onresize=function(){SomeJavaScriptCode};

5.3. 例子

5.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onresize事件</title></head><body><div id="myDiv" style="width: 300px; height: 100px; background: red; position: absolute;"></div><script type="text/javascript">var myDiv = document.getElementById("myDiv");myDiv.style.left = (window.innerWidth / 2 - 150) + "px";document.body.onresize = function(e){myDiv.style.left = (window.innerWidth / 2 - 150) + "px";};</script></body> </html>

5.3.2. 效果圖

6. onscroll事件

6.1. onscroll事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)。

6.2. 語(yǔ)法

6.2.1. html中:

?6.2.2. JavaScript中:

object.onscroll=function(){myScript};

6.3. 例子

6.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onscroll事件</title></head><body><div id="myDiv" style="width: 300px; height: 200px; border: solid 1px; overflow: scroll;"><h2>onscroll事件</h2><p>onscroll事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)。<p><h3>語(yǔ)法</h3><h4>html中:</h4><p><element onscroll="myScript"><p><h4>JavaScript中:</h4><p>object.onscroll=function(){myScript};<p></div><p id="myP">結(jié)果:</p><script type="text/javascript">var myDiv = document.getElementById("myDiv");var myP = document.getElementById("myP");myDiv.onscroll = function(e){myP.innerHTML += "<br />div發(fā)生了滾動(dòng)。";};</script></body> </html>

6.3.2. 效果圖

7. onpageshow事件

7.1. onpageshow事件在用戶瀏覽網(wǎng)頁(yè)時(shí)觸發(fā)。

7.2. onpageshow事件類似于onload事件, onload事件在頁(yè)面第一次加載時(shí)觸發(fā), onpageshow事件在每次加載頁(yè)面時(shí)觸發(fā), 即onload事件在頁(yè)面從瀏覽器緩存中讀取時(shí)不觸發(fā)。

7.3. 為了查看頁(yè)面是直接從服務(wù)器上載入還是從緩存中讀取, 你可以使用PageTransitionEvent對(duì)象的persisted屬性來(lái)判斷。如果頁(yè)面從瀏覽器的緩存中讀取該屬性返回ture, 否則返回false。

7.4. 語(yǔ)法

7.4.1. html中:

7.4.2. JavaScript中:

object.onpageshow=function(){myScript};

8. onpagehide事件

8.1. onpagehide事件在用戶離開網(wǎng)頁(yè)時(shí)觸發(fā)。

8.2. 離開網(wǎng)頁(yè)有多種方式。如點(diǎn)擊一個(gè)鏈接, 刷新頁(yè)面, 提交表單, 關(guān)閉瀏覽器等。

8.3. onpagehide事件有時(shí)可以替代 onunload 事件, 但 onunload 事件觸發(fā)后無(wú)法緩存頁(yè)面。

8.4. 語(yǔ)法

8.4.1. html中:

8.4.2. JavaScript中:

object.onpagehide=function(){myScript};

9. 例子

9.1. 代碼

<!DOCTYPE html> <html><head><title>onpageshow和onpagehide事件</title></head><body><script type="text/javascript">var pageshowHistory = localStorage.getItem("onpageshow");if(pageshowHistory != 'null' && pageshowHistory != null){document.write('用戶瀏覽網(wǎng)頁(yè)時(shí)間記錄: ' + localStorage.getItem("onpageshow") + '<br />');}else{document.write('沒有用戶瀏覽記錄。');}var pagehideHistory = localStorage.getItem("onpagehide");if(pagehideHistory != 'null' && pagehideHistory != null){document.write('用戶退出網(wǎng)頁(yè)時(shí)間記錄: ' + localStorage.getItem("onpagehide") + '<br />');}function formatDate(){var d = new Date();return d.getFullYear() + '年' + d.getMonth() + '月' + d.getDate() + '日' + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds(); }document.body.onpageshow = function(e){var time = formatDate();(pageshowHistory != 'null' && pageshowHistory != null) ? (pageshowHistory = pageshowHistory.slice(0, pageshowHistory.length - 1) + ', ' + time + ']') : (pageshowHistory = '[' + time + ']');localStorage.setItem("onpageshow", pageshowHistory);console.log('--------onpageshow---------')};document.body.onpagehide = function(e){var time = formatDate();(pagehideHistory != 'null' && pagehideHistory != null) ? (pagehideHistory = pagehideHistory.slice(0, pagehideHistory.length - 1) + ', ' + time + ']') : (pagehideHistory = '[' + time + ']');localStorage.setItem("onpagehide", pagehideHistory);console.log('--------onpagehide---------')};</script></body> </html>

9.2. 效果圖

10. onerror事件

10.1. onerror事件在加載外部文件(文檔或圖像)發(fā)生錯(cuò)誤時(shí)觸發(fā)。

10.2. 語(yǔ)法

10.2.1. html中:

10.2.2. JavaScript中:

object.onerror=function(){myScript};

10.3. 例子

10.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onerror事件</title><script type="text/javascript">function imgLoadError(e){console.log('圖片加載錯(cuò)誤');}function jsLoadError(e){console.log('js加載錯(cuò)誤');}function cssLoadError(e){console.log('css加載錯(cuò)誤');}</script><link rel="stylesheet" type="text/css" href="xxx.css" onerror="cssLoadError(event)" /></head><body><img id="myImg" src="xxx.png" alt="xxx.png" onerror="imgLoadError(event)" /><script type="text/javascript" src="xxx.js" onerror="jsLoadError(event)"></script></body> </html>

10.3.2. 效果圖

11. onhashchange事件

11.1. onhashchange事件在當(dāng)前URL的錨部分(以'#'號(hào)為開始)發(fā)生改變時(shí)觸發(fā)。

11.2. 錨部分的實(shí)例: http://www.example.com/test.htm#part5

11.3. 你可以使用以下方式調(diào)用事件:

11.3.1. 通過(guò)設(shè)置Location對(duì)象的location.hash或location.href屬性修改錨部分。

11.3.2. 使用不同書簽導(dǎo)航到當(dāng)前頁(yè)面(使用"后退"或"前進(jìn)"按鈕)。

11.3.3. 點(diǎn)擊鏈接跳轉(zhuǎn)到書簽錨。

11.4. 語(yǔ)法

11.4.1. html中:

11.4.2. JavaScript中:

object.onhashchange=function(){myScript};

11.5. 例子

11.5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onhashchange</title></head><body onhashchange="hashChange(event)"><button onclick="changePart()">點(diǎn)我改變hash值</button><script type="text/javascript">function changePart() {location.hash = "part5";}function hashChange(e){alert(location.hash);}</script></body> </html>

11.5.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的100_框架对象事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。