javascript - innerHTML 不接受检索到的变量

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

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

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

以隐身方式运行此程序，出现以下错误:

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>