iT邦幫忙

1

如何持續追蹤網頁的元素變動?

  • 分享至 

  • xImage

例如通知訊息
我想要寫一段JS
外掛在網頁上  讓每次網頁收到訊息  就跳出一個視窗:"有訊息"
------------
我的想法:
是否用每一秒就確認一次元素有沒有存在?
這樣會不會導致一直操電腦 瀏覽效果不好?
有沒有其他方法追蹤  例如addEventListener?
(我查到他僅能追蹤input的格子  不能監測div的變化)

froce iT邦大師 1 級 ‧ 2022-12-26 08:30:23 檢舉
websocket 或 server sent event,一秒一個輪詢浪費頻寬,人數多你伺服器會先撐不住。
天黑 iT邦研究生 5 級 ‧ 2022-12-26 14:50:05 檢舉
版主提到"每次網頁收到訊息",代表已經有串接好的接收訊息機制對吧,那就在接收時直接呼叫Alert就可以了
akajoke iT邦新手 5 級 ‧ 2022-12-27 10:55:53 檢舉
謝謝各位的意見
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2022-12-26 22:44:59
最佳解答

如果有後端或是NODEJS。則可以利用 websocket 來幫您處理。
不過依照你的需求。

大多數會建議使用 setinterval 來處理。
可以設定1~5秒固定檢查要偵測的DOM。

畢竟您是要外加式的。

一般如果偵測的元件數不多的情況下。基本來說倒還不會太過影響網頁的瀏覽情況。
但要小心長時間運做會導致記憶體肥大的問題。

akajoke iT邦新手 5 級 ‧ 2022-12-27 10:55:43 檢舉

的確是外加式的 謝謝分析

1
Dylan
iT邦新手 3 級 ‧ 2022-12-25 18:18:38

聽你的想法,網頁是要一直開著是嗎?

先看那網頁接收訊息是不是用 websocket,這樣說不定可以自己建一個 server 去接。
若真要監聽元素,可以試試 MutationObserver

akajoke iT邦新手 5 級 ‧ 2022-12-27 10:56:10 檢舉

狠心的資訊 謝謝你提供

1
japhenchen
iT邦超人 1 級 ‧ 2022-12-26 10:38:11

用setTimeout+ajax+json.................

每隔1分鐘發動一次查詢最後一筆異動ID,如果接收到的數字大於現在,就再向網站提取完整內容(一樣用ajax),不用怕loading也不會發生全頁更新的問題

怕loading過高的話你可以把id更新的動作靜態化(每隔幾分鐘才吐出一次最新的記錄id存成JSON檔,我習慣放在linux tmpfs上不會有硬碟I/O動作,windows的話就算了),不用隨時動態更新省的你怕loading過重的問題

akajoke iT邦新手 5 級 ‧ 2022-12-27 10:56:39 檢舉

很詳細的解答 謝謝你

我要發表回答

立即登入回答