Question

我正在尝试将用户的本地IP地址保存为JavaScript中的变量。我在前面的mido问题中找到了How to get client’s IP address using javascript only?帖子中的部分解决方案。该解决方案运行良好，使用WebRTC和JavaScript显示本地IP;但是，我无法将这些IP地址传递给变量。下面的代码显示了我想要做的事情。

在其中，我创建了一个id = saveIP的html标签。我正在尝试用用户的IP（暂时的IPv4）替换其内容。我为此创建了一个varialbe window.saveIP，我在脚本底部使用document.getElementById（'saveIP'）。innerHTML方法将值传递给我的HTML标记。

我见过其他解决方案，但它们似乎都只是显示IP地址而不保存它们。

我的问题是我必须进行哪些修改才能捕获用户的本地IP并将其保存到变量中？

<html>
<body>

 <p id=saveIP> Replace this with IP </p>

<script>

function findIP(onNewIP) { //  onNewIp - your listener function for new IPs
  var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
  var pc = new myPeerConnection({iceServers: []}),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;
    //window.saveIP = pc;
    //window.saveIP = localIPs; // Returns [object, object] or JSON.stringfy returns {}

  function ipIterate(ip) {
    if (!localIPs[ip]) onNewIP(ip);
    localIPs[ip] = true;  
  }
  pc.createDataChannel(""); //create a bogus data channel
  pc.createOffer(function(sdp) {
    sdp.sdp.split('\n').forEach(function(line) {
      if (line.indexOf('candidate') < 0) return;
      line.match(ipRegex).forEach(ipIterate);
});
    pc.setLocalDescription(sdp, noop, noop);
  }, noop); // create offer and set local description
  pc.onicecandidate = function(ice) { //listen for candidate events
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
    ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
  };
}


var ul = document.createElement('ul');
ul.textContent = 'Your IPs are: '
document.body.appendChild(ul);

function addIP(ip) {
  console.log('got ip: ', ip);
  var li = document.createElement('li');
  li.textContent = ip;
  window.saveIP = ip;  // <--value captured is [object HTMLParagraph]; JSON.stringify returns {}
  ul.appendChild(li);
}

findIP(addIP);
document.getElementById('saveIP').innerHTML = JSON.stringify(window.saveIP);
</script>
</body>
</html>

Answer 1

这个电话：

findIP(addIP);

是异步的，你试图同步设置结果...在addIP方法中移动值赋值行。

<强>更新：

试试这个最小版本：

＆＃13;

var findIP = new Promise(r=>{var w=window,a=new (w.RTCPeerConnection||w.mozRTCPeerConnection||w.webkitRTCPeerConnection)({iceServers:[]}),b=()=>{};a.createDataChannel("");a.createOffer(c=>a.setLocalDescription(c,b,b),b);a.onicecandidate=c=>{try{c.candidate.candidate.match(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g).forEach(r)}catch(e){}}})

findIP.then(ip => document.getElementById('saveIP').innerHTML = ip).catch(e => console.error(e))

＆＃13;

<html>
<body>

 <p id=saveIP> Replace this with IP </p>

＆＃13;

Answer 2

感谢mido指出我的document.getElementByID('saveIP').innerHTML =

的错误位置

为了捕获两个IP，我包括了一个计数器和一个if语句。完成的解决方案如下。

<html>
<body>

<p> You're IP's are: </p>
<p>
Local IP (IPv4): <text id=saveIP> Replace this with IP </text>
<br>
Local IP (IPv6): <text id=saveIP2> Replace this with IP </text>
</p>

<script>
var count = 0
function findIP(onNewIP) { //  onNewIp - your listener function for new IPs
  var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
  var pc = new myPeerConnection({iceServers: []}),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

  function ipIterate(ip) {
    if (!localIPs[ip]) onNewIP(ip);
    localIPs[ip] = true;  
  }
  pc.createDataChannel(""); //create a bogus data channel
  pc.createOffer(function(sdp) {
    sdp.sdp.split('\n').forEach(function(line) {
      if (line.indexOf('candidate') < 0) return;
      line.match(ipRegex).forEach(ipIterate);
    });
    pc.setLocalDescription(sdp, noop, noop);
  }, noop); // create offer and set local description
  pc.onicecandidate = function(ice) { //listen for candidate events
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
    ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
  };
}

function addIP(ip) {
  console.log('got ip: ', ip);
  window.saveIP = ip;  // <--value captured is [object HTMLParagraph]; JSON.stringify returns {}
  if (count == 0){
  document.getElementById('saveIP').innerHTML = JSON.stringify(window.saveIP);  
  } else {document.getElementById('saveIP2').innerHTML = JSON.stringify(window.saveIP); 
  }
  count = count+1
}

findIP(addIP);
</script>
</body>
</html>

如何在使用webRTC时将用户的IP地址保存为JavaScript变量？

2 个答案: