javascript - 输出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，这个是 '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 标签中并用 包裹你的 javascript

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

在使用 jquery 之前确保它已加载

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