一、从JavaScript获取本地IP地址
JavaScript可以通过WebRTC的API获取本地IP地址。WebRTC(Web Real-Time Communication)是一种浏览器间点对点的实时通信技术,是基于NAT(Network Address Translation)技术的。
下面是从JavaScript获取本地IP地址的示例:
<script> window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var pc = new RTCPeerConnection({iceServers:[]}), s = () => ['192.168.2.1']; pc.createDataChannel(''); pc.createOffer(pc.setLocalDescription.bind(pc), s); pc.onicecandidate = function(ice) { if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(/typ host/g)) return; document.getElementById('local-ip').innerHTML = (ice.candidate.candidate.match(/([0-9]{1,3}\.){3}[0-9]{1,3}/g))[0]; pc.onicecandidate = () => {}; }; </script> <div id="local-ip"></div>
上面代码通过RTCPeerConnection创建一个对等连接,并通过setLocalDescription()设置一个本地描述和一些空的ICE服务器对象,然后创建了一个数据信道。使用createOffer()创建了一个offer,并将本地描述设置为offer;然后onicecandidate事件会将获取到的IP地址赋值给div元素中。
二、从JavaScript获取本地IP地址和主机名称
通过网络接口信息获取本地IP地址和主机名称。这种方法需要通过Node.js,在浏览器端无法使用。
示例代码如下:
const os = require('os'); const interfaces = os.networkInterfaces(); for (const interfaceName in interfaces) { const interface = interfaces[interfaceName]; for (let i = 0; i < interface.length; i++) { const alias = interface[i]; if (alias.family !== 'IPv4' || alias.internal !== false) { continue; } console.log(`Interface: ${interfaceName}, Address: ${alias.address}, Hostname: ${os.hostname()}`); } }
上面的代码通过os模块获取本地网络接口信息,并遍历获取IPv4地址和主机名。
三、从JavaScript获取本地IP地址知乎
在知乎上有用户分享了一个获取本地IP地址的JavaScript代码。示例代码如下:
function find(ip, mask) { var ips = ip.split('.'); var masks = mask.split('.'); var result = []; for(var i=0; i上面代码中,使用了一个input元素,当用户选择文件后,调用readFile()函数。该函数使用FileReader API读取文件内容,并输出到控制台。
五、从JavaScript获取本地图片
如果需要从浏览器本地文件系统中获取图片文件,可以使用Canvas API。下面是一个简单的示例:
<input type="file" onchange="loadImage(this)"> <script> function loadImage(input) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var image = new Image(); image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); var dataUrl = canvas.toDataURL('image/png'); console.log(dataUrl); }; image.src = URL.createObjectURL(input.files[0]); } </script>上面代码中,使用了一个input元素,当用户选择图片后,调用loadImage()函数。该函数使用Canvas API绘制图片到画布上,并将处理后的图片输出为data URL格式的字符串。
六、通过Vue获取本地IP
Vue.js是一个MVVM(Model-View-ViewModel)框架,用于构建动态Web界面。Vue.js提供了一种MVVM的渐进式框架,并支持组件化开发。下面是一个使用Vue.js获取本地IP的示例:
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> Your IP address is: {{ ip }} </div> <script> new Vue({ el: '#app', data: { ip: null }, mounted() { this.getIP(); }, methods: { getIP() { axios.get('https://api.ipify.org?format=json').then(response => { this.ip = response.data.ip; }); } } }); </script>上面代码中,使用了Vue.js通过axios调用API获取本地IP,并将IP地址输出为数据绑定绑定到div元素。
七、前端获取本地IP地址
可以使用XMLHttpRequest调用REST API获取本地IP地址。下面是一个使用XMLHttpRequest获取本地IP地址的示例:
<div id="ip"></div> <script> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { var result = JSON.parse(xhr.responseText); document.getElementById('ip').innerHTML = result.ip; } }; xhr.open('GET', 'https://api.ipify.org?format=json', true); xhr.send(); </script>上面代码中,使用XMLHttpRequest调用REST API获取本地IP地址,并将结果输出到div元素。
八、通过JavaScript获取当前IP地址
可以通过location对象获取当前访问页面的IP地址。下面是一个获取当前IP地址的示例:
Your IP address is: <span id="ip"></span> <script> var ipAddress = location.hostname; document.getElementById('ip').innerHTML = ipAddress; </script>上面代码中,使用location对象获取当前访问页面的IP地址,并将IP地址输出到span元素。
九、从JavaScript获取用户的IP地址
可以使用JavaScript在浏览器端获取用户的IP地址。下面是一个获取用户IP地址的示例:
<script> var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://ipv4.myexternalip.com/jsonp/'; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(script, ref); function callback(json) { var ipAddress = json.ip; console.log(ipAddress); } </script>上面代码中,使用了一个外部脚本获取JSON格式的用户IP地址,并将IP地址输出到控制台。