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

不要直接调用 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>

Answer 2

您可以使用 JQuery 轻松完成此操作。将要插入的文本用 span 或 div 之类的标记包围起来，给它一个可以引用的 id，这个是 'addr'

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

然后你 console.log 你的 ip 添加这个，hashtag 很重要，表示它是一个 id。

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

你必须包括 jquery，粘贴这个

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

在你的 head 标签中，用

包裹你的 javascript

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

确保 jquery 在使用前已加载

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

输出 console.log 到 html

Output console.log to html

html

javascript

console.log