Question

我尝试从ipify获取客户端IP的示例：

<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

这很好用。

当我尝试将其添加到我的文档中时，没有任何内容出现：

JS

<script type="application/javascript">
var s$ = function(e) {return document.getElementById(e);};

function getIP(json) {
    s$('clientIP').innerHTML = json.ip;
}
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

HTML

<div>
    <p><label for="clientIP">clientIP</label><span id="clientIP"></span></p>
</div>

查看Chrome控制台，会出现此错误：

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

不确定我理解为什么第一种方法有效，第二种方法没有。

＆＃13;

<div>
  <p><label for="clientIP">clientIP</label><span id="clientIP"></span></p>
</div>
<script type="application/javascript">
  var s$ = function(e) {
    return document.getElementById(e);
  };

  function getIP(json) {
    s$('clientIP').innerHTML = json.ip;
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

＆＃13;

运行此隐身模式，我收到以下错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at getIP (VM26:10)
    at api.ipify.org/:1

Full HTML

Answer 1

由于广告拦截器插件（例如AdBlock plus），这种情况最常发生。要对此进行测试，请尝试在隐身模式下运行，或尝试在其他浏览器中运行。

要永久修复它，您可以删除广告拦截器扩展程序。

我无法确定广告拦截器使用的确切算法，但您的第二个代码段中的某些内容正在触发广告拦截器“认为”它需要阻止该内容。

关于您的第二个问题（cannot set property of null），这很可能是因为您尝试引用的元素（'clientIP'）尚未呈现。这就像jQuery之类的东西非常方便，因为你可以利用document.ready事件。这可确保您的代码在 DOM完成渲染后触发。现在的方式（在你的第二个片段中），不保证在代码执行时呈现DOM。但是，如果没有jQuery，您可以使用超时，并执行以下操作：

<script type="application/javascript"> var s$ = function(e) {return document.getElementById(e);}; function getIP(json) { setTimeout(function() { s$('clientIP').innerHTML = json.ip; }, 1000); } </script>

innerHTML不接受检索到的变量

1 个答案: