web-dev-qa-db-de.com

Wie erzwinge ich, dass ein Skript neu geladen und erneut ausgeführt wird?

Ich habe eine Seite, die ein Skript von einem Dritten lädt (Newsfeed). Die src-URL für das Skript wird beim Laden dynamisch zugewiesen (per Drittanbietercode).

<div id="div1287">
    <!-- dynamically-generated elements will go here. -->
</div>

<script id="script0348710783" type="javascript/text">
</script>

<script type="javascript/text">
    document.getElementById('script0348710783').src='http://oneBigHairyURL';
</script>

Das aus http://oneBigHairyURL geladene Skript erstellt und lädt dann Elemente mit den verschiedenen Elementen aus dem Newsfeed, mit hübscher Formatierung usw. in div1287 (die ID "div1287" wird in http://oneBigHairyURL übergeben, damit das Skript weiß, wo der Inhalt geladen wird).

Das einzige Problem ist, dass es nur einmal geladen wird. Ich möchte, dass es alle n Sekunden neu geladen wird (und somit neuer Inhalt angezeigt wird).

Also dachte ich, ich würde es versuchen:

<div id="div1287">
    <!-- dynamically-generated elements will go here. -->
</div>

<script id="script0348710783" type="javascript/text">
</script>

<script type="javascript/text">
    loadItUp=function() {
        alert('loading...');
        var divElement = document.getElementById('div1287');
        var scrElement = document.getElementById('script0348710783');

        divElement.innerHTML='';
        scrElement.innerHTML='';
        scrElement.src='';
        scrElement.src='http://oneBigHairyURL';
        setTimeout(loadItUp, 10000);
    };
    loadItUp();
</script>

Ich bekomme die Warnung, das div wird gelöscht, aber kein dynamisch generierter HTML-Code wird neu geladen.

Irgendeine Idee, was ich falsch mache?

53
Jonathan M

Wie wäre es, ein neues Skript-Tag zu <head> hinzuzufügen, während das Skript (neu) geladen wird? Etwas wie unten:

<script>
   function load_js()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.src= 'source_file.js';
      head.appendChild(script);
   }
   load_js();
</script>

Der wichtigste Punkt ist das Einfügen eines neuen Skript-Tags - Sie können den alten Tag ohne Folgen entfernen. Möglicherweise müssen Sie der Abfragezeichenfolge einen Zeitstempel hinzufügen, wenn Sie Probleme mit dem Caching haben.

54
Kelly

Hier ist eine Methode, die der von Kelly ähnelt, aber jedes vorhandene Skript mit derselben Quelle entfernt und jQuery verwendet. 

<script>
    function reload_js(src) {
        $('script[src="' + src + '"]').remove();
        $('<script>').attr('src', src).appendTo('head');
    }
    reload_js('source_file.js');
</script>

Beachten Sie, dass das Attribut 'type' ab HTML5 nicht mehr für Skripts erforderlich ist. ( http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element )

31
Luke

Haben Sie versucht, es aus dem DOM zu entfernen und es dann wieder einzufügen?

Ich habe es einfach getan, das geht nicht. Das Erstellen eines neuen Skript-Tags und das Kopieren des Inhalts des vorhandenen Skript-Tags und das anschließende Hinzufügen des Skripts funktionieren jedoch gut. 

Siehe mein Beispiel http://jsfiddle.net/mendesjuan/LPFYB/

var scriptTag = document.createElement('script');
scriptTag.innerText = "document.body.innerHTML += 'Here again ---<BR>';";
var head = document.getElementsByTagName('head')[0];
head.appendChild(scriptTag);

setInterval(function() {
    head.removeChild(scriptTag);
    var newScriptTag = document.createElement('script');
    newScriptTag.innerText = scriptTag.innerText;
    head.appendChild(newScriptTag);
    scriptTag = newScriptTag;    
}, 1000);

Dies funktioniert nicht, wenn Sie davon ausgehen, dass sich das Skript jedes Mal ändert, was meiner Meinung nach Ihr Fall ist. Sie sollten Kellys Vorschlag folgen, entfernen Sie einfach das alte Skript-Tag (um das DOM schlank zu halten, hat dies keinen Einfluss auf das Ergebnis) und fügen Sie ein neues Skript-Tag mit demselben Src und einem Cachebuster ein.

6
Juan Mendes

Kleine Veränderung zu Lukes Antwort

 function reloadJs(src) {
    src = $('script[src$="' + src + '"]').attr("src");
    $('script[src$="' + src + '"]').remove();
    $('<script/>').attr('src', src).appendTo('body');
}

und nenne es wie 

relaodJs("myFile.js");

Dies hat keine Pfadprobleme.

2

Verwenden Sie diese Funktion, um alle Skriptelemente zu finden, die Word enthalten, und aktualisieren Sie sie.

function forceReloadJS(srcUrlContains) {
  $.each($('script:empty[src*="' + srcUrlContains + '"]'), function(index, el) {
    var oldSrc = $(el).attr('src');
    var t = +new Date();
    var newSrc = oldSrc + '?' + t;

    console.log(oldSrc, ' to ', newSrc);

    $(el).remove();
    $('<script/>').attr('src', newSrc).appendTo('head');
  });
}

forceReloadJS('/libs/');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

0
stomy