Reputation: 11
I'm trying to develop a code to reproduce the Local IP address. I have the code and it will show in the console.log, however, what I now need is to store that IP address that shows in the console.log and reproduce it in the html code. The code I'm currently using to get the IP address is the following:
<script language="javascript">
function show(obj,hd,msg,off){
messageBox.style.top=obj.offsetTop + 100
messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5-off
heading.innerHTML=hd
contents.innerHTML=msg
messageBox.style.display="block"
}
//get the IP addresses associated with an account
function getIPs(callback){
var ip_dups = {};
//compatibility for firefox and chrome
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
//bypass naive webrtc blocking using an iframe
if(!RTCPeerConnection){
//NOTE: you need to have an iframe in the page right above the script tag
//
//<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
//<script>...getIPs called in here...
//
var win = iframe.contentWindow;
RTCPeerConnection = win.RTCPeerConnection
|| win.mozRTCPeerConnection
|| win.webkitRTCPeerConnection;
useWebKit = !!win.webkitRTCPeerConnection;
}
//minimal requirements for data connection
var mediaConstraints = {
optional: [{RtpDataChannels: true}]
};
var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
//construct a new RTCPeerConnection
var pc = new RTCPeerConnection(servers, mediaConstraints);
function handleCandidate(candidate){
//match just the IP address
var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
var ip_addr = ip_regex.exec(candidate)[1];
//remove duplicates
if(ip_dups[ip_addr] === undefined)
callback(ip_addr);
ip_dups[ip_addr] = true;
}
//listen for candidate events
pc.onicecandidate = function(ice){
//skip non-candidate events
if(ice.candidate)
handleCandidate(ice.candidate.candidate);
};
//create a bogus data channel
pc.createDataChannel("");
//create an offer sdp
pc.createOffer(function(result){
//trigger the stun server request
pc.setLocalDescription(result, function(){}, function(){});
}, function(){});
//wait for a while to let everything done
setTimeout(function(){
//read candidate info from local description
var lines = pc.localDescription.sdp.split('\n');
lines.forEach(function(line){
if(line.indexOf('a=candidate:') === 0)
handleCandidate(line);
});
}, 1000);
}
//Test: Print the IP addresses into the console
getIPs(function(ip){console.log(ip);});
</script>
After debugging this code, the IP address shows in the console log. What I now want to do is the following:
<td width="550" height="100"><font color="#01539c">
Local Area Connection IPv4 address - //string with IP
<br>
Wireless Network Connection IPv4 address - //string with IP
</font></td>
Would you be able to help on how I could add the IP address to each of those lines please? What I'd also like to know is that if there is a way to assign a string variable with the IP address I retrieve from the console.log and then call this string variable in html. So for example, the code would look something like this:
Local Area Connection - strIP
And in the web page it would show like this:
Local Area Connection - 192.167.2.35
Hope this last part clarifies my point further and thanks to all those who have helped with their input so far.
Upvotes: 0
Views: 3400
Reputation: 28558
Instead of calling console.log
directly, write a function that calls console.log
and outputs to your HTML as well.
function log(message) {
console.log(message);
var logArea = document.getElementById('log');
console.log(logArea);
logArea.innerText = logArea.innerText + message;
}
function start() {
console.log('starting...');
log('Something');
console.log('... finished');
}
start();
Logged messages:
<div id="log">
</div>
Upvotes: 0
Reputation: 56
You can use JQuery to do this very easily. Surround the text you want to insert with a tag like a span or div, giving it an id you can reference, this one is 'addr'
<span id="addr">Address will appear here</span>
Then where you console.log your ip add this, the hashtag is important, signifying it is an id.
$('#addr').text(ip);
you must include jquery, paste this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
in your head tag and wrap your javascript with
$( document ).ready(function() { ... code goes here... });
To make sure jquery is loaded before you use it
Here is an example http://codepen.io/joshuajharris/pen/jbxyGx
Upvotes: 3