输出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轻松完成此操作。 用跨度或div之类的标签将要插入的文本括起来，并为其指定一个ID，供您参考，这是“ addr”

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

在您的head标签中，并用

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

确保在使用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>