整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          「老葉HTML入門(mén)筆記」03絕對(duì)地址與相對(duì)地址

          「老葉HTML入門(mén)筆記」03絕對(duì)地址與相對(duì)地址

          對(duì)地址

          <img src=http://www.jungjaehyung.com/uploadfile/2024/1011/20241011084920296.jpg” />

          相對(duì)地址: ./當(dāng)前目錄 ../向上退一級(jí)目錄

          1、圖片和網(wǎng)頁(yè)在同一個(gè)文件夾中


          index.html中調(diào)用a.jpg


          index.html高用a.jpg

          我們經(jīng)常會(huì)有需求,希望能獲取的到當(dāng)前用戶的IP地址,而IP又分為公網(wǎng)ip(也稱外網(wǎng))和私網(wǎng)IP(也稱內(nèi)網(wǎng)IP),IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式,每臺(tái)設(shè)備都設(shè)定了一個(gè)唯一的IP地址”,從而確保了用戶在連網(wǎng)的計(jì)算機(jī)上操作時(shí),能夠快速地從互聯(lián)網(wǎng)中找到自己所需的對(duì)象。

          外網(wǎng)IP和內(nèi)網(wǎng)IP的區(qū)別

          1,外網(wǎng)IP是全球唯一的IP地址,僅分配給某一臺(tái)網(wǎng)絡(luò)設(shè)備。內(nèi)網(wǎng)IP是由路由器分配給每一臺(tái)設(shè)備內(nèi)部使用的IP地址;

          2,外網(wǎng)IP任何一臺(tái)設(shè)備都可以ping通。內(nèi)網(wǎng)IP只有在同一環(huán)境的內(nèi)部設(shè)備才能ping通;

          3,外網(wǎng)用戶無(wú)法直接訪問(wèn)到內(nèi)網(wǎng)用戶,內(nèi)網(wǎng)用戶可以訪問(wèn)外網(wǎng)用戶,因?yàn)閮?nèi)網(wǎng)的所有用戶都是通過(guò)同一個(gè)外網(wǎng)IP進(jìn)行上網(wǎng)的;

          如何獲取外網(wǎng)IP

          這里我們可以借助現(xiàn)成的接口,搜狐提供的一個(gè)JS接口獲取IP地址,我們只需在入口index.html中直接引入該接口即可輕松獲取到當(dāng)前用戶的外網(wǎng)ip,Vue中在public中的index.html中引入接口,然后再需要獲取的地方通過(guò)returnCitySN['cip']即可拿到IP地址,然后將IP存到localstorage或者Vuex中,這樣隨時(shí)可以調(diào)用了。

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

          如何獲取內(nèi)網(wǎng)IP

          獲取內(nèi)網(wǎng)IP相對(duì)來(lái)說(shuō)會(huì)復(fù)雜些,畢竟沒(méi)有現(xiàn)成的接口可以調(diào)用,這里我們用到了WebRTC(網(wǎng)頁(yè)即時(shí)通信),在WebRTC規(guī)范中,RTCPeerConnection可以用于視頻流/音頻流、以及數(shù)據(jù)的傳輸。這里們通過(guò)RTCPeerConnection 對(duì)象建立一個(gè)連接通道,下面3個(gè)或?qū)ο笫轻槍?duì)不同瀏覽器來(lái)創(chuàng)建的。

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

          當(dāng)RTCPeerConnection對(duì)象存在時(shí),我們就可以實(shí)例化該對(duì)象并創(chuàng)建一個(gè)可以發(fā)送任意數(shù)據(jù)的數(shù)據(jù)通道,此時(shí)我們的RTCPeerConnection對(duì)象中數(shù)據(jù)基本都是null。

          var RTCPeerConnection=window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
           if (RTCPeerConnection) (()=>{
           var rtc=new RTCPeerConnection()
           rtc.createDataChannel(''); //創(chuàng)建一個(gè)可以發(fā)送任意數(shù)據(jù)的數(shù)據(jù)通道
           })()
          

          什么是SDP

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

          建立sdp數(shù)據(jù)

          我們從要做的就是從SDP中拿到傳輸協(xié)議中的信息,創(chuàng)建一條sdp數(shù)據(jù)并將數(shù)據(jù)存入LocalDescription對(duì)象中。這樣我們?cè)贚ocalDescription中就得到了所有的SDP數(shù)據(jù),從下圖中我們可以看到有IP地址在里面,接下來(lái)就可以從sdq中提取ip地址了。

          rtc.createOffer( offerDesc=> { //創(chuàng)建并存儲(chǔ)一條sdp數(shù)據(jù)
           rtc.setLocalDescription(offerDesc)
          }, e=> { console.warn(e)})
          

          監(jiān)聽(tīng)candidate事件

          onicecandidate屬性在RTCPeerConnection實(shí)例上發(fā)生icecandidate事件時(shí)要調(diào)用的函數(shù),當(dāng)我們向服務(wù)器發(fā)送消息時(shí)觸發(fā)并獲取到SDP中的candidate屬性,而candidate中正好有我們想要的IP地址,你可以直接獲取var ip_addr=evt.candidate.address。當(dāng)然你也可以從candidate屬性中獲取,不過(guò)這里就會(huì)復(fù)雜點(diǎn),用個(gè)正則來(lái)提取吧(顯然方法一簡(jiǎn)單)。

           rtc.onicecandidate=(evt)=> { //監(jiān)聽(tīng)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)
           }}
          

          代碼封裝

          最后整理下代碼,封裝成一個(gè)方法需要的時(shí)候直接調(diào)用即可,通過(guò)localStorage來(lái)存儲(chǔ)獲取到的ip_addr(或者Vuex存儲(chǔ)),然后我們只需要通過(guò)localStorage.getItem('ip_addr'))就可以獲取到我們的內(nèi)網(wǎng)IP地址了。

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

          歡迎關(guān)注本人的公眾號(hào):編程手札,文章也會(huì)在公眾號(hào)更新

          輯導(dǎo)語(yǔ):前段時(shí)間,有很多博主因?yàn)镮P屬地問(wèn)題“翻車”,而是否展示IP屬地也引發(fā)了廣大網(wǎng)友的討論。為什么各大平臺(tái)突然集體展示賬號(hào)IP屬地?這項(xiàng)功能有什么意義?本篇文章中,作者給出了答案,我們一起來(lái)看看吧。

          最近,各大平臺(tái)網(wǎng)站陸續(xù)公開(kāi)了賬號(hào)IP屬地。對(duì)于這項(xiàng)新的政策,網(wǎng)上主流觀點(diǎn)都持支持態(tài)度。為什么突然間各大平臺(tái)網(wǎng)站很有默契的同時(shí)開(kāi)發(fā)且執(zhí)行了公開(kāi)賬號(hào)IP屬地這項(xiàng)功能,這對(duì)產(chǎn)品設(shè)計(jì)工作會(huì)有怎樣的影響,在這里一站式分享與你。

          一、關(guān)于展示IP地址的相關(guān)規(guī)定

          關(guān)于IP屬地展示,最早提出是為了網(wǎng)絡(luò)言論的實(shí)名化,即通過(guò)展示言論屬地IP來(lái)對(duì)不良網(wǎng)絡(luò)言論行為進(jìn)行威懾,達(dá)到清朗網(wǎng)絡(luò)環(huán)境的目的。

          所以國(guó)家互聯(lián)網(wǎng)信息辦公室在2010年10月提出《互聯(lián)網(wǎng)用戶賬號(hào)名稱信息管理規(guī)定(征求意見(jiàn)稿)》,其中十二條明確規(guī)定:

          “互聯(lián)網(wǎng)用戶賬號(hào)服務(wù)平臺(tái)應(yīng)當(dāng)以顯著方式,在互聯(lián)網(wǎng)用戶賬號(hào)信息頁(yè)面展示賬號(hào)IP地址屬地信息。境內(nèi)互聯(lián)網(wǎng)用戶賬號(hào)IP地址屬地信息需標(biāo)注到?。▍^(qū)、市),境外賬號(hào)IP地址屬地信息需標(biāo)注到國(guó)家(地區(qū))?!?/p>

          但這里需要注意,這是一個(gè)征求意見(jiàn)稿,所以并不是本次執(zhí)行的法規(guī)依據(jù)。

          通俗地講就是問(wèn)問(wèn)大家意見(jiàn),這樣規(guī)定行不行,如果覺(jué)得不行那再修改修改。

          雖然不是執(zhí)行文件,但是也表達(dá)了國(guó)家對(duì)IP展示方案的意向。

          而此次各大平臺(tái)突然開(kāi)發(fā)展示賬戶IP屬地的真正原因是今年4月中央網(wǎng)信辦開(kāi)展的“清朗·網(wǎng)絡(luò)暴力專項(xiàng)治理行動(dòng)”

          總而言之,目前并未有強(qiáng)制的法規(guī)要求平臺(tái)系統(tǒng)對(duì)賬號(hào)做地域展示,目前的展示主要也是用于響應(yīng)國(guó)家關(guān)于網(wǎng)絡(luò)環(huán)境的相關(guān)號(hào)召,或者是一種試運(yùn)行狀態(tài)。

          二、我們?yōu)槭裁葱枰私?/h1>

          既然沒(méi)有要求,那知道這些對(duì)我們是否還有意義?

          1. 只是一個(gè)高曝光的知識(shí)點(diǎn)

          既然主流的內(nèi)容平臺(tái)都已經(jīng)上線此功能,那么在各種需求會(huì)議上和日常工作交流中就有可能會(huì)被不經(jīng)意地提及。

          雖然不是復(fù)雜的需求,但也是需求,是需求就需要處理。

          而全面了解此功能的背景與現(xiàn)狀是我們從容應(yīng)對(duì)需求的基礎(chǔ),同時(shí)也能表現(xiàn)自己的產(chǎn)品全面性與專業(yè)性,因?yàn)楣δ苄。匀菀滓驍U(kuò)展的回答制造驚喜。

          2. 這是一個(gè)風(fēng)險(xiǎn)點(diǎn),而且可能是法律風(fēng)險(xiǎn)點(diǎn)

          不知道大家是否有這樣的經(jīng)歷,在規(guī)劃產(chǎn)品或者項(xiàng)目的時(shí)候,難免會(huì)遇到一道填空題,一道關(guān)于風(fēng)險(xiǎn)的填空題。

          填的太真實(shí),影響項(xiàng)目立項(xiàng)或者推進(jìn),填的太敷衍,容易被diss說(shuō)沒(méi)經(jīng)驗(yàn);假如選擇抄取前輩的“答案”,又擔(dān)心前輩變成評(píng)審會(huì)的參與方。

          而現(xiàn)在就有一個(gè)現(xiàn)成的答案,既能政治正確又沒(méi)啥成本。

          3. 這是一個(gè)小成本功能點(diǎn)

          說(shuō)到成本,我想為了各項(xiàng)合規(guī)而開(kāi)發(fā)的功能中,展示IP是相對(duì)成本小的一個(gè)功能,甚至大部分系統(tǒng)的會(huì)員數(shù)據(jù)里面本來(lái)就擁有IP數(shù)據(jù),甚至還有定位數(shù)據(jù),而且還不用改變業(yè)務(wù)流程。

          小成本功能是能很好地增加產(chǎn)品的靈活性。

          4. 這是未來(lái)的趨勢(shì)

          關(guān)于網(wǎng)絡(luò)環(huán)境治理,只會(huì)越來(lái)越規(guī)范。

          關(guān)于IP屬地展示規(guī)定的試水,目前的主流觀點(diǎn)是持支持態(tài)度,所以大概率我們還是會(huì)迎來(lái)需要強(qiáng)制展示IP歸屬地的那一天,就像現(xiàn)在的域名備案一樣成為常態(tài)化硬性要求。

          三、產(chǎn)品設(shè)計(jì)需要注意的事項(xiàng)

          1. 當(dāng)前的主流設(shè)計(jì)

          我整理了、知乎、貼吧、小紅書(shū)和快手的功能對(duì)比,總結(jié)下來(lái)主要是在三個(gè)位置做IP屬地的展示,分別是【作者主頁(yè)】、【文章頁(yè)】、【評(píng)論區(qū)】,詳細(xì)情況我已分別對(duì)上述各個(gè)平臺(tái)做了截圖介紹。

          同樣是展示功能,各個(gè)平臺(tái)對(duì)于展示這件事的解釋有各自的理解:

          • 頭條和知乎沒(méi)發(fā)現(xiàn)常態(tài)化對(duì)用戶的解釋型功能
          • 貼吧和快手對(duì)IP展示的數(shù)據(jù)做出了解釋,主要針對(duì)的是數(shù)據(jù)不準(zhǔn)確的這種情況,解決方案是需要用戶聯(lián)系客服進(jìn)行溝通
          • 小紅書(shū)做的則特別小心,明確彈窗說(shuō)明增加IP屬地展示是為了維護(hù)網(wǎng)絡(luò)安全且數(shù)據(jù)來(lái)源于運(yùn)營(yíng)商,是目前我能找到解釋最全面的,從原因和數(shù)據(jù)準(zhǔn)確性兩個(gè)維度都對(duì)用戶做了常態(tài)化的解釋。

          2. 數(shù)據(jù)邏輯

          IP屬地展示的數(shù)據(jù)源是來(lái)自于系統(tǒng)對(duì)用戶發(fā)生行為的時(shí)候獲取的IP地址數(shù)據(jù)進(jìn)行展示,所以主要分為兩種:

          (1)博主IP

          博主IP位置數(shù)據(jù):根據(jù)賬號(hào)注冊(cè)時(shí)的IP屬地進(jìn)行存儲(chǔ)展示,即在博主注冊(cè)但未發(fā)表作品的狀態(tài)下展示對(duì)應(yīng)的IP位置,后期根據(jù)發(fā)布作品時(shí)的IP位置做對(duì)應(yīng)的統(tǒng)計(jì)得出博主IP位置。主要參考的邏輯是在設(shè)定的時(shí)間段內(nèi)作品發(fā)布時(shí)的IP統(tǒng)計(jì)和注冊(cè)IP屬地加權(quán)計(jì)算取值。

          (2)作品和評(píng)論IP

          用戶作品和評(píng)論的IP來(lái)源則是根據(jù)發(fā)布時(shí)的實(shí)際IP地址歸屬獲取并展示。

          3. 展示位置與樣式設(shè)計(jì)思路

          (1)博主IP

          關(guān)于博主IP,目前看下來(lái)大家主要是以完成功能為主,但是值得參考的是快手的實(shí)踐。

          快手將用戶自己設(shè)置的地址與IP地址結(jié)合,在主頁(yè)面是展示省份+城市。

          但是這個(gè)數(shù)據(jù)其實(shí)是博主自己設(shè)置的數(shù)據(jù),點(diǎn)擊進(jìn)去則會(huì)展示IP地址與博主自己設(shè)置的地址。

          正常情況下用戶查看時(shí)兩個(gè)數(shù)據(jù)是對(duì)應(yīng)的,如果有不誠(chéng)實(shí)的情況,則也暴露的很明顯。而且其他的平臺(tái)主要還是在博主信息區(qū)對(duì)地址做展示。

          (2)作品IP

          目前看到的所有的作品詳情頁(yè)關(guān)于IP地址的展示都是不明顯的,但是這很合理,因?yàn)橛脩暨M(jìn)來(lái)看的是內(nèi)容又不是定位信息。

          對(duì)于文章類的就兩個(gè)思路,一種是在文章頭部展示,另一種是在文章尾部做展示,基本做到頁(yè)面和諧即可。

          (3)評(píng)論IP

          關(guān)于評(píng)論IP屬地的展示,各個(gè)平臺(tái)的展示思路高度一致,在原來(lái)頁(yè)面展示評(píng)論時(shí)間的后面直接追加對(duì)應(yīng)的IP屬地,省力又和諧。

          4. 其他

          IP屬地的展示深度只能到省份級(jí)別,直轄市則展示城市名。

          用戶解釋文案:

          • “IP屬地以運(yùn)營(yíng)商信息為準(zhǔn),如果有問(wèn)題可咨詢客服”;
          • “為維護(hù)網(wǎng)絡(luò)安全、保障良好生態(tài)和社區(qū)的真實(shí)性,根據(jù)網(wǎng)絡(luò)運(yùn)營(yíng)商數(shù)據(jù),展示用戶IP屬地信息”。

          四、寫(xiě)在最后

          截止至我發(fā)文的時(shí)間,IP屬地展示功能了解即可,如果未來(lái)剛好遇到的真的要上這個(gè)功能,那希望也能為你提供一點(diǎn)點(diǎn)幫助。

          參考資料:

          1、中央網(wǎng)信辦:http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html

          2、國(guó)家互聯(lián)網(wǎng)信息辦公室官網(wǎng):http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html

          本文由 @瑞見(jiàn)釘錘 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

          題圖來(lái)自 Unsplash,基于CC0協(xié)議


          主站蜘蛛池模板: 精品少妇一区二区三区在线 | 色欲AV蜜桃一区二区三| 色老头在线一区二区三区| 国产精品一区在线麻豆| 国产精品丝袜一区二区三区| 一区二区在线视频观看| 国产精品福利一区二区| 久久综合精品不卡一区二区 | 日韩AV无码一区二区三区不卡毛片| 精品视频在线观看一区二区| 日韩免费无码一区二区视频| 五十路熟女人妻一区二区| 亚洲av日韩综合一区在线观看| 中文字幕国产一区| 亚洲大尺度无码无码专线一区| 日韩人妻无码一区二区三区| 精品国产一区二区三区久久狼| 老熟妇高潮一区二区三区| 亚洲无圣光一区二区 | 国语对白一区二区三区| 一区二区三区无码视频免费福利| 亚洲国产一区在线观看| 国产精品综合一区二区三区| 亚洲AV本道一区二区三区四区| 狠狠综合久久AV一区二区三区| 国产乱码伦精品一区二区三区麻豆 | 精品国产一区二区三区在线| 国产精品一区在线观看你懂的| 国产伦精品一区二区三区无广告| 风间由美在线亚洲一区| 日亚毛片免费乱码不卡一区| 最新中文字幕一区二区乱码| 亚洲综合无码一区二区三区 | 久久精品岛国av一区二区无码| 成人精品一区二区三区电影| 无码aⅴ精品一区二区三区| 日本一区中文字幕日本一二三区视频| 亚洲综合无码一区二区| 久久国产免费一区| 国产精品福利一区二区| 精品视频在线观看一区二区|