H5如何获取内网IP和公网IP

昔日_少年

已于 2022-02-08 15:56:25 修改

阅读量3.4k

点赞数 5

分类专栏： H5 JavaScript 文章标签： javascript html5

于 2021-08-12 10:12:10 首次发布

本文链接：https://blog.csdn.net/weixin_48730699/article/details/119635259

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

9 篇文章 1 订阅

订阅专栏

前端H5开发，获取内网IP和公网IP

可直接打开，简答便捷，重要的事情说三遍
直接使用！
直接使用！
直接使用！

获取内网IP

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>内网ip</li>
		</ul>
		<script>
			function getIPs(callback) {
				var ip_dups = {};

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

				if (!RTCPeerConnection) {

					var iframe = document.createElement('iframe');
					iframe.style.display = 'none';

					iframe.sandbox = 'allow-same-origin';

					iframe.addEventListener("DOMNodeInserted", function(e) {
						e.stopPropagation();
					}, false);
					iframe.addEventListener("DOMNodeInsertedIntoDocument", function(e) {
						e.stopPropagation();
					}, false);

					document.body.appendChild(iframe);
					var win = iframe.contentWindow;
					RTCPeerConnection = win.RTCPeerConnection ||
						win.mozRTCPeerConnection ||
						win.webkitRTCPeerConnection;
					useWebKit = !!win.webkitRTCPeerConnection;
				}

				var mediaConstraints = {
					optional: [{
						RtpDataChannels: true
					}]
				};

				var servers = undefined;

				if (useWebKit)
					servers = {
						iceServers: [{
							urls: "stun:stun.services.mozilla.com"
						}]
					};

				var pc = new RTCPeerConnection(servers, mediaConstraints);

				function handleCandidate(candidate) {

					var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/
					var ip_addr = ip_regex.exec(candidate)[1];

					if (ip_dups[ip_addr] === undefined)
						callback(ip_addr);
					ip_dups[ip_addr] = true;
				}

				pc.onicecandidate = function(ice) {

					if (ice.candidate)
						handleCandidate(ice.candidate.candidate);
				};

				pc.createDataChannel("");

				pc.createOffer(function(result) {

					pc.setLocalDescription(result, function() {}, function() {});
				}, function() {});

				setTimeout(function() {

					var lines = pc.localDescription.sdp.split('\n');
					lines.forEach(function(line) {
						if (line.indexOf('a=candidate:') === 0)
							handleCandidate(line);
					});
				}, 1000);
			}

			getIPs(function(ip) {
				var li = document.createElement("li");
				li.textContent = ip;
				if (ip.match(/^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/)) {
					//内网ip
					document.getElementsByTagName("ul")[0].appendChild(li);
				}
			});
		</script>
	</body>
</html>

获取公网IP

通常我们使用搜狐的接口

<!DOCTYPE html>
<html>
	<head>
		<title>公网ip获取</title>
		<meta http-equiv=Content-Type content="text/html; charset=gb2312">
	</head>
	<body>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
		<script type="text/javascript">
			document.write(returnCitySN["cip"] + ',' + returnCitySN["cname"])
		</script>
	</body>
</html>

昔日_少年

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
H5如何获取内网IP和公网IP

前端H5开发，获取内网IP和公网IP可直接打开，简答便捷，重要的事情说三遍直接使用！直接使用！直接使用！获取内网IP<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>内网ip</li> </ul&g
复制链接

扫一扫