输出console.log到html

Question

我正在尝试开发一个代码来重现本地IP地址。我有代码，它会显示在console.log中，但是，我现在需要的是存储显示在console.log中的IP地址并将其重现在html代码中。我目前用来获取IP地址的代码如下：

<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> 

调试完此代码后，IP地址显示在控制台日志中。我现在想要做的是以下几点：

<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> 

你能帮助我如何将IP地址添加到每个这些行吗？我也想知道的是，如果有一种方法来分配一个字符串变量与我从console.log中检索到的IP地址，然后在html中调用该字符串变量。因此，例如，代码会是这个样子：

Local Area Connection - strIP 

而且在网页中它会显示这样的：

本地连接 - 192.167.2.35

希望这最后一部分澄清我的观点得到进一步的肯定，并感谢所有那些迄今为止帮助过他们的投入。

Answer 1

您可以使用jQuery来做到这一点很容易。 环绕你想与像SPAN或DIV标签插入，从中你可以参考一个id文本，这个人是“地址”

<span id="addr">Address will appear here</span> 

然后在那里你CONSOLE.LOG您的IP地址添加这一点，哈希标签很重要，表示它是一个ID。

$('#addr').text(ip); 

，你必须包括jQuery的，复制粘贴此

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

在你的头标记，并与

$(document).ready(function() { ... code goes here... }); 

包装你的JavaScript来确保jQuery是加载你使用它

前

这里是一个例子 http://codepen.io/joshuajharris/pen/jbxyGx

Answer 2

而不是直接调用console.log，写一个函数，调用console.log并输出到您的HTML。

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>