Laden einer externen HTML-Datei, die eine externe Javascript-Datei zu einem div

Question

enthält So habe ich eine Seite, die Links zu externen Projekt-Seiten enthält. Diese Projekt-Seiten erhalten geladen in ein div über eine Funktion:

function clickEv(foo) { 
    $('#loadContent').load('sub/'+foo+'.html').fadeIn('fast'); 
    window.location.hash = foo; 
} 

Diese Projekt-Seiten haben alle die gleiche Schablone, Text-div auf der linken Seite und ein Bild div auf der rechten Seite. Was ich tun möchte, ist ein Schieberegler für das Bild-Div. Dieser Schieberegler ist eine externe JavaScript-Datei:

$(function() { 
var sliderUL = $('.imageBrowser').children('ul'), 
    imgs = sliderUL.find('img'), 
    imgWidth = imgs[0].width, 
    imgsLen = imgs.length, 
    current = 1, 
    totalImgsWidth = imgsLen * imgWidth; 

$('#sButtons').find('div').on('click', function() { 
    var direction = $(this).data('dir'), 
     loc = imgWidth; 

    // update current value 
    (direction === 'next') ? ++current : --current; 

    // if first image 
    if (current === 0) { 
     current = imgsLen; 
     loc = totalImgsWidth - imgWidth; 
     direction = 'next'; 
    } else if (current - 1 === imgsLen) { 
     current = 1; 
     loc = 0; 
    } 

    transition(sliderUL, loc, direction); 
}); 

Also zuerst ich die Bilder in der unsortierten Liste innerhalb div ‚Image‘ gefunden und dann bestimmen, wo ich mit dem zurück und nächsten Schaltflächen innerhalb div ‚sButtons‘ werde. Wieder verwenden alle Projektseiten die gleiche Vorlage mit den Divs und Listen.

Ich habe versucht, mit dieser slider.js Datei indem sie sie mit <script> Tags am Anfang der Projektseiten-Dateien sowie durch die Einbeziehung .getScript() innerhalb der ersten clickEv(foo) Funktion anzubringen. Es scheint jedoch nicht mit der ersten .load() zu arbeiten, ich glaube, das liegt daran, dass die imageBrowser und sButtons des div noch nicht in der ursprünglichen HTML-Datei existieren? Wenn ich denselben Projekt-Seiten-Link erneut drücke und die Dateien zum zweiten Mal lade, funktioniert der Slider wie vorgesehen. Es ist das gleiche für jede Projektseite, z. Ich öffne Projekt-Seite1 - Schieberegler funktioniert nicht, ich öffne Projekt-Seite2 - Schieberegler funktioniert nicht, ich öffne Projekt-Seite1 wieder - Schieberegler funktioniert, ich öffne Projekt-Seite2 wieder - Schieberegler funktioniert. Wenn ich jetzt zu Seite1 zurückwechsle, funktioniert der Slider immer noch, aber wenn ich Seite3 öffne, funktioniert es nicht mehr.

Ich versuche etwas, das nicht machbar ist oder was mache ich falsch?

// EDIT

Ich glaube, ich habe es jetzt arbeiten, war das Problem, dass das Skript ausgeführt wurde immer, bevor der Inhalt geladen wurde. So begannen die Variablen, die versuchten, Informationen von den Elementen zu bekommen, erst dann zu arbeiten, wenn sie aus dem Cache geladen wurden.

Ich habe onload="$.getScript('src/slider.js')" zu der ersten <img> Datei innerhalb einer Projektseite hinzugefügt. Somit wird das Skript ausgeführt, nachdem die erforderlichen Elemente geladen wurden! Danke an euch alle und ich werde immer noch diesen iframe aufgrund der Leistung berücksichtigen.

Answer 1

Wenn Sie JavaScript in der Datei enthalten, die Sie (die rohe Javascript, kein Link zu einer Datei) importieren Sie den Code innerhalb der Script-Tags eval lassen sich wie folgt:

var scripts = document.getElementByTagId("loadContent").getElementsByTagName("script"); 
for(i = 0; i < scripts.length; i++){ 
    eval(scripts[i].innerHTML); 
} 

Ich habe nicht getestet in allen Browsern, aber es funktioniert in Chrome und FF

Theoretisch, da der geladene Inhalt bereits auf der Seite hinzugefügt wird, bevor Sie das Skript überprüfen, sollte es funktionieren.