錨點元素上的ping屬性

錨元素的 ping 屬性接受以空格分隔的URL列表。當錨定義ping URL并有人單擊它時，瀏覽器將向這些指定的URL發送 POST 請求。如果您要跟蹤和分析用戶如何與您的網站進行交互，此功能可能會有所幫助。

<a href="https://www.stefanjudis.com/popular-posts/"  
   ping="https://www.stefanjudis.com/tracking/">Read popular posts</a> 

要查看其運行情況，請打開您的開發人員工具，然后單擊下面的鏈接。??

Read popular posts

實際上，當您在開發人員工具中打開network面板時(啟用“保存日志”來查看瀏覽器導航到新URL后的請求)，您會在單擊“ping鏈接”后看到一個請求飛向定義的URL。

POST請求的有效載荷是單字 PING。ping-to 請求頭中保存著鏈接的目的地，另外還有 user-agent 等附加信息。有趣的是， content-type 是 text/ping。??

總而言之，ping 屬性提供了一種實現“鏈接點擊跟蹤”的輕巧方式。這是否意味著您今天就可以使用它?

瀏覽器對ping屬性的支持

在MDN上查看屬性的瀏覽器兼容性表時，您會發現瀏覽器支持還不錯。

Chromium瀏覽器(Chrome、Edge等)支持。火狐瀏覽器的支持是在瀏覽器功能標志(browser.send_pings)后面，而Safari...。Safari被錯誤地標注為不支持。

為什么沒人使用ping?

我是原生HTML解決方案的忠實擁護者。問題是為什么沒有人使用 ping 屬性(或者您知道使用它的網站嗎?)?

我只能在這里推測，但一個原因可能是用戶分析主要由第三方提供商(例如Google Analytics(分析))驅動。

作為一個Web開發者，要使用這些，你所要做的就是在你的網站中嵌入一個腳本。JavaScript將跟蹤所有的用戶行為，并且沒有任何基礎的設置就能工作。

如果您的跟蹤基于 ping 屬性，則必須調整站點上的所有鏈接。這個過程包括更多的維護和開發工作，這是反對使用 ping 屬性的有力論據。

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。