将console.log输出到html

时间:2015-10-27 23:58:17

标签: javascript html console.log

我正在尝试开发一个代码来重现本地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

希望最后一部分进一步澄清我的观点,并感谢所有那些迄今为止已经帮助过他们的人。

2 个答案:

答案 0 :(得分:3)

您可以使用JQuery轻松完成此操作。 使用span或div等标记围绕要插入的文本,为其指定一个可以引用的ID,这个是&#39; addr&#39;

<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

答案 1 :(得分:0)

不要直接调用$('.navbar-collapse').css('-webkit-transform', 'translate(0, -100%)'); ,而是编写一个调用console.log并输出到HTML的函数。

&#13;
&#13;
console.log
&#13;
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();
&#13;
&#13;
&#13;