「老葉HTML入門筆記」03絕對地址與相對地址

對地址

相對地址： ./當前目錄 ../向上退一級目錄

1、圖片和網頁在同一個文件夾中

index.html中調用a.jpg

index.html高用a.jpg

言

我們經常會有需求，希望能獲取的到當前用戶的IP地址，而IP又分為公網ip（也稱外網）和私網IP（也稱內網IP），IP地址是IP協議提供的一種統一的地址格式，每臺設備都設定了一個唯一的IP地址”，從而確保了用戶在連網的計算機上操作時，能夠快速地從互聯網中找到自己所需的對象。

外網IP和內網IP的區別

1，外網IP是全球唯一的IP地址，僅分配給某一臺網絡設備。內網IP是由路由器分配給每一臺設備內部使用的IP地址；

2，外網IP任何一臺設備都可以ping通。內網IP只有在同一環境的內部設備才能ping通；

3，外網用戶無法直接訪問到內網用戶，內網用戶可以訪問外網用戶，因為內網的所有用戶都是通過同一個外網IP進行上網的；

如何獲取外網IP

這里我們可以借助現成的接口，搜狐提供的一個JS接口獲取IP地址，我們只需在入口index.html中直接引入該接口即可輕松獲取到當前用戶的外網ip，Vue中在public中的index.html中引入接口，然后再需要獲取的地方通過returnCitySN['cip']即可拿到IP地址，然后將IP存到localstorage或者Vuex中，這樣隨時可以調用了。

//引入JS
 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
//在組件中獲取，可以選擇在首頁載入前獲取該參數
var Ip=returnCitySN['cip']
localStorage.setItem('Ip', Ip)

如何獲取內網IP

獲取內網IP相對來說會復雜些，畢竟沒有現成的接口可以調用，這里我們用到了WebRTC（網頁即時通信），在WebRTC規范中,RTCPeerConnection可以用于視頻流/音頻流、以及數據的傳輸。這里們通過RTCPeerConnection 對象建立一個連接通道，下面3個或對象是針對不同瀏覽器來創建的。

var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;

當RTCPeerConnection對象存在時，我們就可以實例化該對象并創建一個可以發送任意數據的數據通道，此時我們的RTCPeerConnection對象中數據基本都是null。

var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 if (RTCPeerConnection) (()=>{
 var rtc=new RTCPeerConnection()
 rtc.createDataChannel(''); //創建一個可以發送任意數據的數據通道
 })()

什么是SDP

SDP 是一種會話描述格式，由許多文本行組成，文本行的格式為<類型>=<值>，<類型>是一個字母，<值>是結構化的文本串。SDP中包含了很多媒體信息，包括了媒體類型（video）、傳輸協議（RTP/UDP/IP）、媒體格式（H.264 video）、多播或單播地址和端口、本端的帶寬信息、本端的加密信息等。

建立sdp數據

我們從要做的就是從SDP中拿到傳輸協議中的信息，創建一條sdp數據并將數據存入LocalDescription對象中。這樣我們在LocalDescription中就得到了所有的SDP數據，從下圖中我們可以看到有IP地址在里面，接下來就可以從sdq中提取ip地址了。

rtc.createOffer( offerDesc=> { //創建并存儲一條sdp數據
 rtc.setLocalDescription(offerDesc)
}, e=> { console.warn(e)})

監聽candidate事件

onicecandidate屬性在RTCPeerConnection實例上發生icecandidate事件時要調用的函數，當我們向服務器發送消息時觸發并獲取到SDP中的candidate屬性，而candidate中正好有我們想要的IP地址，你可以直接獲取var ip_addr=evt.candidate.address。當然你也可以從candidate屬性中獲取，不過這里就會復雜點，用個正則來提取吧（顯然方法一簡單）。

 rtc.onicecandidate=(evt)=> { //監聽candidate事件
 if (evt.candidate) {
 //方法一：
 var ip_addr=evt.candidate.address
 //方法二：
 let ip_rule=/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.
 var ip_addr=ip_rule.exec(evt.candidate.candidate)[1]
 console.log("ip_addr==",ip_addr)
 }}

代碼封裝

最后整理下代碼，封裝成一個方法需要的時候直接調用即可，通過localStorage來存儲獲取到的ip_addr（或者Vuex存儲），然后我們只需要通過localStorage.getItem('ip_addr'))就可以獲取到我們的內網IP地址了。

getUserIP(){
 var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 if (RTCPeerConnection) (()=>{
 var rtc=new RTCPeerConnection()
 rtc.createDataChannel(''); //創建一個可以發送任意數據的數據通道
 rtc.createOffer( offerDesc=> { //創建并存儲一個sdp數據
 rtc.setLocalDescription(offerDesc)
 }, e=> { console.log(e)})
 rtc.onicecandidate=(evt)=> { //監聽candidate事件
 if (evt.candidate) {
 var ip_addr=evt.candidate.address
 localStorage.setItem('ip_addr',ip_addr)
 }}
 })()
 else{console.log("目前僅測試了chrome瀏覽器OK")}
}

歡迎關注本人的公眾號：編程手札，文章也會在公眾號更新

輯導語：前段時間，有很多博主因為IP屬地問題“翻車”，而是否展示IP屬地也引發了廣大網友的討論。為什么各大平臺突然集體展示賬號IP屬地？這項功能有什么意義？本篇文章中，作者給出了答案，我們一起來看看吧。

最近，各大平臺網站陸續公開了賬號IP屬地。對于這項新的政策，網上主流觀點都持支持態度。為什么突然間各大平臺網站很有默契的同時開發且執行了公開賬號IP屬地這項功能，這對產品設計工作會有怎樣的影響，在這里一站式分享與你。

一、關于展示IP地址的相關規定

關于IP屬地展示，最早提出是為了網絡言論的實名化，即通過展示言論屬地IP來對不良網絡言論行為進行威懾，達到清朗網絡環境的目的。

所以國家互聯網信息辦公室在2010年10月提出《互聯網用戶賬號名稱信息管理規定（征求意見稿）》，其中十二條明確規定：

“互聯網用戶賬號服務平臺應當以顯著方式，在互聯網用戶賬號信息頁面展示賬號IP地址屬地信息。境內互聯網用戶賬號IP地址屬地信息需標注到省（區、市），境外賬號IP地址屬地信息需標注到國家（地區）。”

但這里需要注意，這是一個征求意見稿，所以并不是本次執行的法規依據。

通俗地講就是問問大家意見，這樣規定行不行，如果覺得不行那再修改修改。

雖然不是執行文件，但是也表達了國家對IP展示方案的意向。

而此次各大平臺突然開發展示賬戶IP屬地的真正原因是今年4月中央網信辦開展的“清朗·網絡暴力專項治理行動”

總而言之，目前并未有強制的法規要求平臺系統對賬號做地域展示，目前的展示主要也是用于響應國家關于網絡環境的相關號召，或者是一種試運行狀態。

二、我們為什么需要了解

既然沒有要求，那知道這些對我們是否還有意義？

1. 只是一個高曝光的知識點

既然主流的內容平臺都已經上線此功能，那么在各種需求會議上和日常工作交流中就有可能會被不經意地提及。

雖然不是復雜的需求，但也是需求，是需求就需要處理。

而全面了解此功能的背景與現狀是我們從容應對需求的基礎，同時也能表現自己的產品全面性與專業性，因為功能小，所以容易因擴展的回答制造驚喜。

2. 這是一個風險點，而且可能是法律風險點

不知道大家是否有這樣的經歷，在規劃產品或者項目的時候，難免會遇到一道填空題，一道關于風險的填空題。

填的太真實，影響項目立項或者推進，填的太敷衍，容易被diss說沒經驗；假如選擇抄取前輩的“答案”，又擔心前輩變成評審會的參與方。

而現在就有一個現成的答案，既能政治正確又沒啥成本。

3. 這是一個小成本功能點

說到成本，我想為了各項合規而開發的功能中，展示IP是相對成本小的一個功能，甚至大部分系統的會員數據里面本來就擁有IP數據，甚至還有定位數據，而且還不用改變業務流程。

小成本功能是能很好地增加產品的靈活性。

4. 這是未來的趨勢

關于網絡環境治理，只會越來越規范。

關于IP屬地展示規定的試水，目前的主流觀點是持支持態度，所以大概率我們還是會迎來需要強制展示IP歸屬地的那一天，就像現在的域名備案一樣成為常態化硬性要求。

三、產品設計需要注意的事項

1. 當前的主流設計

我整理了、知乎、貼吧、小紅書和快手的功能對比，總結下來主要是在三個位置做IP屬地的展示，分別是【作者主頁】、【文章頁】、【評論區】，詳細情況我已分別對上述各個平臺做了截圖介紹。

同樣是展示功能，各個平臺對于展示這件事的解釋有各自的理解：

頭條和知乎沒發現常態化對用戶的解釋型功能
貼吧和快手對IP展示的數據做出了解釋，主要針對的是數據不準確的這種情況，解決方案是需要用戶聯系客服進行溝通
小紅書做的則特別小心，明確彈窗說明增加IP屬地展示是為了維護網絡安全且數據來源于運營商，是目前我能找到解釋最全面的，從原因和數據準確性兩個維度都對用戶做了常態化的解釋。

2. 數據邏輯

IP屬地展示的數據源是來自于系統對用戶發生行為的時候獲取的IP地址數據進行展示，所以主要分為兩種：

（1）博主IP

博主IP位置數據：根據賬號注冊時的IP屬地進行存儲展示，即在博主注冊但未發表作品的狀態下展示對應的IP位置，后期根據發布作品時的IP位置做對應的統計得出博主IP位置。主要參考的邏輯是在設定的時間段內作品發布時的IP統計和注冊IP屬地加權計算取值。

（2）作品和評論IP

用戶作品和評論的IP來源則是根據發布時的實際IP地址歸屬獲取并展示。

3. 展示位置與樣式設計思路

（1）博主IP

關于博主IP，目前看下來大家主要是以完成功能為主，但是值得參考的是快手的實踐。

快手將用戶自己設置的地址與IP地址結合，在主頁面是展示省份+城市。

但是這個數據其實是博主自己設置的數據，點擊進去則會展示IP地址與博主自己設置的地址。

正常情況下用戶查看時兩個數據是對應的，如果有不誠實的情況，則也暴露的很明顯。而且其他的平臺主要還是在博主信息區對地址做展示。

（2）作品IP

目前看到的所有的作品詳情頁關于IP地址的展示都是不明顯的，但是這很合理，因為用戶進來看的是內容又不是定位信息。

對于文章類的就兩個思路，一種是在文章頭部展示，另一種是在文章尾部做展示，基本做到頁面和諧即可。

（3）評論IP

關于評論IP屬地的展示，各個平臺的展示思路高度一致，在原來頁面展示評論時間的后面直接追加對應的IP屬地，省力又和諧。

4. 其他

IP屬地的展示深度只能到省份級別，直轄市則展示城市名。

用戶解釋文案：

“IP屬地以運營商信息為準，如果有問題可咨詢客服”；
“為維護網絡安全、保障良好生態和社區的真實性，根據網絡運營商數據，展示用戶IP屬地信息”。

四、寫在最后

截止至我發文的時間，IP屬地展示功能了解即可，如果未來剛好遇到的真的要上這個功能，那希望也能為你提供一點點幫助。

參考資料：

1、中央網信辦：http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html

2、國家互聯網信息辦公室官網：http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html

本文由 @瑞見釘錘原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

在線咨詢

上一篇：HTML認識表單和提交方式的對比
下一篇：什么是jQuery插件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商