前端Js獲取本網IP和外網IP方法總彙

我們應該知道一臺電腦需要兩個ip才可以上網，一個是本地的內網ip(本地ip)，另一個就是外網ip(公網ip)。值得說明的是：外網ip具有世界範圍的唯一性，而內網ip只在區域網內部具有唯一性。並且一個區域網裡所有電腦的內網IP是互不相同的,但共用一個外網IP。
下面我們通過js來分別獲取當前電腦的內網ip和外網ip。

 

js獲取內網ip 

方式一：新浪的IP地址查詢介面

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>  
    console.log(returnCitySN["cip"]+','+returnCitySN["cname"])  
</script>

 

方式二：ipify介面,get請求獲取

<script>
	function get(url,cb){
		var httpRequest = new XMLHttpRequest();
		httpRequest.open('GET', url, true);
		httpRequest.send();
		httpRequest.onreadystatechange = function () {
		    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
		        var json = httpRequest.responseText;
				cb(json);
		    }
		};	
	}
	get("https://api.ipify.org/?format=json",function(data){
		data=JSON.parse(data);
		console.log(data.ip);
	});
</script>

 

方式三：其它可獲取公網IP的網址

http://www.fly63.com/php/ipquery/(推薦，本站推出的工具，除了查詢本機公網IP或本地IP外，還支援查詢域名所在的伺服器IP)
http://ip.360.cn/IPShare/info
http://myip.com.tw/
http://ip.xianhua.com.cn/
https://www.ip.cn/
https://www.123cha.com/ip/
https://ip38.com/
http://ip.chinaz.com
https://www.taobao.com/help/getip.php(推薦，天貓和淘寶都需要使用)

 

JS獲取內網IP

<script type="text/JavaScript">
function getIP(callback) {
	let recode = {};
	let RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
	// 如果不存在則使用一個iframe繞過
	if (!RTCPeerConnection) {
		// 因為這裡用到了iframe，所以在呼叫這個方法的script上必須有一個iframe標籤
		// <iframe id="iframe" sandbox="allow-same-origin" style="display:none;"></iframe>
		let win = iframe.contentWindow;
		RTCPeerConnection = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection;
	}
	//建立例項，生成連線
	let pc = new RTCPeerConnection();
	// 匹配字串中符合ip地址的欄位
	function handleCandidate(candidate) {
		let ip_regexp = /([0-9]{1,3}(\.[0-9]{1,3}){3}|([a-f0-9]{1,4}((:[a-f0-9]{1,4}){7}|:+[a-f0-9]{1,4}){6}))/;
		let ip_isMatch = candidate.match(ip_regexp)[1];
		if (!recode[ip_isMatch]) {
			callback(ip_isMatch);
			recode[ip_isMatch] = true;
		}
	}
	//監聽icecandidate事件
	pc.onicecandidate = (ice) => {
		if (ice.candidate) {
			handleCandidate(ice.candidate.candidate);
		}
	};
	//建立一個偽資料的通道
	pc.createDataChannel('');
	pc.createOffer((res) => {
		pc.setLocalDescription(res);
	}, () => {});
	//延遲，讓一切都能完成
	setTimeout(() => {
		let lines = pc.localDescription.sdp.split('\n');
		lines.forEach(item => {
			if (item.indexOf('a=candidate:') === 0) {
				handleCandidate(item);
			}
		})
	}, 1000);
}
//呼叫
getIP( function (ip) {
    console.log(ip);
})
</script>