innerHTML- akzeptiert keine Variable abgerufen

Question

Ich versuche, das Beispiel von ipify ein Client-IP zu erhalten:

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

Dies funktioniert gut.

Wenn ich versuche, dies in mein Dokument hinzufügen, nichts erscheint:

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> 

Mit Blick auf die Chrome-Konsole Dieser Fehler erscheint :

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 

Nicht sicher, ich verstehe, warum die erste Methode funktioniert, die zweite nicht.

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

dieses inkognito Rennen, bekomme ich folgende Fehlermeldung:

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

Full HTML

Answer 1

Dies ist vor allem, wie geschieht aufgrund einer Ad-Blocker-Plugin (wie AdBlock Plus). Um dies zu testen, versuchen Sie es im Inkognito-Modus oder versuchen Sie, es in einem anderen Browser auszuführen.

Um es dauerhaft zu beheben, können Sie die Ad Blocker-Erweiterung entfernen.

Ich kann nicht sicher sein, den genauen Algorithmus, den der Werbeblocker verwendet, aber etwas in Ihrem zweiten Ausschnitt löst den Werbeblocker aus, um zu "denken", dass er diesen Inhalt blockieren muss.

In Bezug auf Ihre zweite Frage (cannot set property of null), ist das wahrscheinlich, weil das Element, das Sie versuchen zu verweisen ("ClientIP"), noch nicht gerendert wurde. Hier ist etwas wie jQuery sehr praktisch, wie Sie das document.ready Ereignis nutzen können. Dies stellt sicher, dass Ihr Code nach das DOM-Rendering abgeschlossen hat. Wie Sie es jetzt haben (in Ihrem zweiten Snippet), wird das DOM nicht garantiert wiedergegeben, wenn Ihr Code ausgeführt wird. Ohne jQuery können Sie jedoch eine Zeitüberschreitung verwenden und so etwas tun:

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

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