[FRAGE] Externe Js-Datei innerhalb einer Funktion nachladen?

[dbarthel]

Kann man innerhalb einer JS-Funktion eine andere Js-Datei nachladen?

$(.ext-link.click(function
{
Src: ext.js

Oder ginge das so wie beim Xml laden?

 

[tsseh]

Kann man innerhalb einer JS-Funktion eine andere Js-Datei nachladen?

einfach eine script-node einfügen und die src-property auf die datei setzen

Oder ginge das so wie beim Xml laden?

uber einen request geht das auch, den empfangenen string dann einfach mit eval interpretieren.

 

[SteelWheel]

Moinsen, wenn Du Dir Dein JavaScript als Objekt aufbaust und einlädst, hast Du sogar ein Pseudo-Entladen zur Verfügung, wodurch die nachgeladenen Funktionen nicht mehr zur Verfügung stünden, wenn Du diese nicht mehr benötigst (Objekt einfach überschreiben). Sportliche Grüße.

 

[dbarthel]

hmm, bin inzwischen über die Funktion

$.getScript("file.js");

gestopert, aber habe sowas noch nie zum Einsatz gebracht.

Hat jemand schon Erfahrungen damit?

Könnte ein funktionierender Aufruf so aussehen:

$.getScript("file.js");

eine_function_in_filejs();

?

 

[tsseh]

getscript unterstützt auch ein callback, da getscript ja nur den request startet, direkt dannach die funktion also meist nicht zur verfügung steht

 

[dbarthel]

Also dann eher so:

$("button").click(function(){
  $.getScript("files.js",eine_function_in_filejs());
});

- - - Aktualisiert - - -

oder

$("button").click(function(){
  $.getScript("files.js","eine_function_in_filejs()");
});

??

- - - Aktualisiert - - -

habe folgenden Code:

$('.external-link').click(function(){$.get("../css/jquery.leaveNotice.css", function(css) {$("head").append("<style type='text/css'>"+css+"</style>");});$.getScript("../js/jquery.leaveNotice.min.js","$('.external-link').leaveNotice({siteName:'Sie verlassen jetzt unsere offizielle, öffentlichen Website.'});");});

und einen link

<a class="external-link" href=""> Extern Class Test</a>

leider passiert beim Klicken gar nichts!


Habe ich irgendwo beim laden des Scripts oder im Code einen Fehler?

Bitte mal helfen!

 

[dbarthel]

Niehmand Ahnung, woran es hängt, oder lasst ihr mich hängen?

 

[tsseh]

$("button").click(function(){
  $.getScript("files.js",function()
  {
    eine_function_in_filejs();
  });
});

 

[j-l-n]

$('.external-link').click(function(){$.get("../css/jquery.leaveNotice.css", function(css) {$("head").append("<style type='text/css'>"+css+"</style>");});$.getScript("../js/jquery.leaveNotice.min.js","$('.external-link').leaveNotice({siteName:'Sie verlassen jetzt unsere offizielle, öffentlichen Website.'});");});

Um den Helfern die Arbeit ein wenig zu erleichtern, jag doch sowas bitte vor dem Posten durch den Online JavaScript beautifier!

Habe ich irgendwo beim laden des Scripts oder im Code einen Fehler?

Das herauszufinden hilft dir die Web-Konsole. Ein unverzichtbares Werkzeug bei der Webentwicklung!

Niehmand Ahnung, woran es hängt, oder lasst ihr mich hängen?

Äh... Also die Erwartungshaltung, dass dir jeder sofort am besten noch in der selben Minute helfen muss, ist etwas deplatziert. Schließlich haben wir ja auch noch anderes zu tun, verständlich?
Wenn es nach ein, zwei Tagen noch keine Antwort geben sollte, dann kannst du gerne nochmal nachfragen. Aber nicht nach ein paar Stunden...

 

[SteelWheel]

Ich werde in Kürze meine Signatur erweitern - ich bin zwar kein Moderator (boah, meine Nerven!) und höher, aber das ist wieder die Kategorie "Google schweigt". Ich zeig Dir mal ein kleines, ganz langweiliges Beispiel zu .getScript() aus jQuery - ist übrigens ein Equivalent zu $.ajax():

$.getScript("js/irgend_ein_script.js", function(data, textStatus, jqxhr) {
  console.log(data); // Dein Zeug
  console.log(textStatus); // success
  console.log(jqxhr.status); // 200
  console.log("Load abgeschlossen.");
  // 1
});

Ich habe Dir ein // 1 an die Stelle gemacht, wo Deine erste Verwendung einer nachgeladenen Funktion hingehören würde ... die Ausgabe von console.log() siehst Du in der Konsole des Browser - siehe Link von Julian, falls Du es nicht gefunden hast.

Damit dürftest Du sehr zügig Deine Anforderung an Dein Script anpassen können, nicht wahr?

Grüße aus Sao Paolo - zumindest bedingt durchs TV-Gerät!

 

[dbarthel]

Ah ja und was genau ist jetzt der Unterschied zwischen "mein Zeug" und dem Aufruf einer Funktion aus dem nachgeladen Script?
Mein Zeug, ist für mich die Funktion, die ich aufrufen will, die aber in der nachzuladenen Datei ist.


Vielleicht könnte jemand, auch wenn ich damit jemandes Nerven strapaziere, mir da an einem Beispiel erklären, was an die Stelle "mein Zeug" gehört.

(@ Steel:
Überdies, falls deine Nerven derart schwach sind, sei es weils beim Fußball nicht so läuft, or whatever, das deine Nerven eine Nachfrage seites eines Einsteigers nicht aushalten, [...]

Wenn ich schon wüsste wie alles geht bräuchte ich nicht zu fragen und wenn immer Google helfen würde, könnte man dieses Forum abschalten.)

Sorry aber diese Bemerkung konnte ich mir jetzt nicht verkneifen.

 

[miniA4kuser]

Wenn du dir deinen (formatierten) Code

$('.external-link').click(function () {
	$.get("../css/jquery.leaveNotice.css", function (css) {
		$("head").append("<style type='text/css'>" + css + "</style>");
	});
	$.getScript("../js/jquery.leaveNotice.min.js", "$('.external-link').leaveNotice({siteName:'Sie verlassen jetzt unsere offizielle, öffentlichen Website.'});");
});

mal genauer anschaust, wirst du feststellen, dass du von dier selbst hättest lernen können und dir die Lösung bei dir selbst hättest abgucken können.

Beide jQuery-Funktionen $.get() und $.getScript() verarbeiten die Serverantwort in einer Callback-Funktion. Diese definierst du entweder direkt in dem Aufruf (wie bei deinem Code) über eine anonyme Funktion, oder du definierst eine Funktionsreferenz.

Also ändern wir mal deinen Code um und fügen eine anonyme Funktion als Callback hinzu

$('.external-link').click(function () {
	$.get("../css/jquery.leaveNotice.css", function (css) {
		$("head").append("<style type='text/css'>" + css + "</style>");
	});
	$.getScript("../js/jquery.leaveNotice.min.js", function () {
		$('.external-link').leaveNotice({
			siteName:'Sie verlassen jetzt unsere offizielle, öffentlichen Website.'
		});
	});
});

 

[dbarthel]

Wenn du dir deinen (formatierten) Code [...] mal genauer anschaust, wirst du feststellen, dass du von dier selbst hättest lernen können und dir die Lösung bei dir selbst hättest abgucken können.

Beide jQuery-Funktionen $.get() und $.getScript() verarbeiten die Serverantwort in einer Callback-Funktion. Diese definierst du entweder direkt in dem Aufruf (wie bei deinem Code) über eine anonyme Funktion, oder du definierst eine Funktionsreferenz.

Also ändern wir mal deinen Code um und fügen eine anonyme Funktion als Callback hinzu [...]

Leider funktioniert es mit deinem Code immernoch nicht, es passiert beim Klick weiterhin gar nichts.



Ist jetzt etwas OT, aber:

Wenn ich mir deinen Code anschaue und meinen, sehe ich zwar das deiner anders ist (mit zusätzlicher Funktion) und es ist mir irgendwie auch einleuchtend, allerdings muss ich zugeben, das es mir teilweise schwer fällt, mich da reinzudecken und quasi wie ein Computer zu denken.
Rein formal kenne ich zwar einiges an Code, aber bei der Umsetzung hängt es noch.

Kennst du evtl. ein gutes, auch für Einsteiger leicht zu verstehendes, Tutoiral zu jQuery/Ajax, das ich mir, in einer ruhigen Minute, zu Gemüte führen könnte?

 

[miniA4kuser]

Steht denn etwas in der http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html?

Existiert bzw. findet dein Selektor $('.external-link') das/die Element(e) mit der Klasse external-link?

Mit welchem Browser testest du das Script bzw. die Seite?

Kannst du nicht einen Testlink machen?

 

[dbarthel]

Es scheint am laden der JS-Datei zu hängen.

$('.external-link').filter(function(){return true}).attr('rel','externalclass');

$('[rel="externalclass"]')
  .click(function(){
    $.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {$("head").append("<style type='text/css'>" + css + "</style>");});
   alert('test1');
   $.getScript("../../Main-Theme/js/jquery.leaveNotice.min.js", function () {alert('test2');});

[... weiterer Code]
})

Bis "alert('test1')" kommt das Script, aber den "alert('test2')" welcher ja kommen müsste, sobald die JS geladen ist, bringt es nicht mehr.

- - - Aktualisiert - - -

Habe den Code zu Testzwecken mal so modifiziert:

$('[rel="externalclass"]')
		.click(function(){
                 $.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {$("head").append("<style type='text/css'>" + css + "</style>");});
                 $.get("../../Main-Theme/js/jquery.leaveNotice.min.js", function (js) {$("head").append("<script src=" + js +"></script>");});
                 alert('test3');
$(this).leaveNotice({siteName:"LeaveNotice Test Page"});
                })

jetzt kommt das Script bis "alert('test3'); aber der Aufruf von leaveNotice() funktioniert immer noch nicht!

- - - Aktualisiert - - -

aber wenn ich das auf https://github.com/rewdy/leaveNotice so sehe, funktioneirt der Aufruf doch genauso:

$(function(){
$('a[rel=external]').leaveNotice({
siteName: 'My Cool Site' @});
});

oder eben

$('a.ex2').leaveNotice({
	siteName:"LeaveNotice Test Page"
});

ich meine, man könnte das dann auch so machen, wie ich, aber entweder geht das prinzipiell nicht oder ich habe einen Denk- bzw. Script-Fehler.

- - - Aktualisiert - - -

Wenn ich mir letzteres nochmal so ansehe, ginge das ganze vielleicht auch einfacher:

$('a.external-link').leaveNotice({
	siteName:"LeaveNotice Test Page"
});

Allerdings muss ich dann immer noch vor diesem Aufruf, die entsprechende JS und CSS nachladen, da die ja nicht ständig vorhanden sein sollen, sondern nur falls es auf der Seite einen Link mit der Klasse "external-link" gibt.

Und da weiß ich jetzt wieder nicht, wie da das gesamte Coding für diesen Fall korrekt aussehen müsste!

Vielleicht könnte man die gets in die "$('.external-link').filter(function(){GETS HERE}); " packen

$('.external-link').filter(function(){
                 $.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {$("head").append("<style type='text/css'>" + css + "</style>");});
                 $.get("../../Main-Theme/js/jquery.leaveNotice.min.js", function (js) {$("head").append("<script src=" + js +"></script>");});
});

und dann mit

$('a.external-link').leaveNotice({
	siteName:"LeaveNotice Test Page"
});

weitermachen?

Bin mir nicht sicher, vielleicht kannst du mir nochmal weiterhelfen!?

- - - Aktualisiert - - -

Update, habe es gerade gestest, geht nicht so.

Bin jetzt total raus und verstehe fast nichts mehr - Brauch dringend Hilfe und neuen Input!

 

[miniA4kuser]

Bis "alert('test1')" kommt das Script, aber den "alert('test2')" welcher ja kommen müsste, sobald die JS geladen ist, bringt es nicht mehr.

Jetz wird es so langsam etwas undurchsichtig. Kannst du nicht ein Minimalbeispiel machen, wo von mir aus nur 2 Links drinnen sind (intern und extern)? Was für Links (HTML-Code) sind das denn? Wie viele externe Links können denn vorhanden sein? Bedenke, dass wenn du bei jedem externen Link, der geklickt wird, dann auch das jQuery-Plugin geladen wird, was wie ich Denke zu einem Konflikt führen wird. Auch vom Traffic her wäre es somit sinnvoller das jQuery-Plugin nur einmalig zu laden, auch wenn du es überhauptnicht benötigst.

Auch denke ich, das dein Ansatz falsch ist, da das jQuery-Plugin wohl auf einen Event (onclick) wartet und du das jQuery-Plugin erst nach diesem Event (onclick) auf das Element registrierst.

 

[dbarthel]

Dann muss ich wohl etwas weiter ausholen.

Im funktionierenden Ist-Zustand, sieht das Script so aus:

// page init
jQuery(function(){
	$('a').filter(function(){return this.hostname && this.hostname !== location.hostname}).attr('rel','external');
	$('.external-link').filter(function(){return true}).attr('rel','external');
	$('[rel="external"]')
		.click(function(e){e.preventDefault();externalLinkConfirm($(this).attr('href'))})
		.each(function(){$(this).attr('title',$(this).prop('title')+' (external link)')}
	);
	});

function externalLinkConfirm(url){
	var extmsg="Sie verlassen jetzt unsere offizielle, öffentlichen Website. Bitte beachten Sie, dass diese Drittanbieter-Website nicht von uns kontrolliert oder von unsere Datenschutzrichtlinie betroffen ist! \nWir sind nicht für den Inhalt dieser Drittanbieter-Website verantwortlich und können diesen nicht beeinflussen. \n\nKlicken Sie [OK] um zu " + url + " zu gelangen.";
	if(confirm(extmsg))location.href=url;
}

Dieses Script bewirkt, das alle Links eines Dokumentes gescannt werden, sind es externe Links, wird die Funktion "externalLinkConfirm" aufgerufen, ansonsten das Ziel des Links.

Nun möchte ich aber, das für die Links, die die Klasse "external-link" haben, nicht dieser Dialog erscheint, sondern das JQuery-Plugin von https://github.com/rewdy/leaveNotice genutzt wird, und für alle Links, die die Klasse "external-link" haben, dann der Dialog in der Form ausgegeben wird, wie er von diesem Plugin bereit gestellt wird.

Also dachte ich mir, ich kann an der Stelle

$('.external-link').filter(function(){

das JS und die CSS für das Plug-In laden und dann, eventuell mittels

.click(function(

(aber unsicher wie)
diesen Dialog vom PlugIn aufrufen,

was eben zu meiner Überlegung

Vielleicht könnte man die gets in die "$('.external-link').filter(function(){GETS HERE}); " packen

Code:
$('.external-link').filter(function(){
$.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {$("head").append("<style type='text/css'>" + css + "</style>");});
$.get("../../Main-Theme/js/jquery.leaveNotice.min.js", function (js) {$("head").append("<script src=" + js +"></script>");});
});
und dann mit

Code:
$('a.external-link').leaveNotice({
siteName:"LeaveNotice Test Page"
});
weitermachen?

geführt hat.

Da dies aber nicht funktioniert, scheine ich da unterwegs allerdings einen Fehler gemacht zu haben!

Nun brächte ich halt spezielle Hilfe, wie man es denn richtig anstellen müsste, damit es funktioniert!

 

[miniA4kuser]

Ah jetzt wird ein Schuh draus. In deinem IST-Zustand filterst du mit den ersten 2 Zeilen die externen Links (denke mal alles <a>-Tags) und gibst ihnen ein Attribut (rel="external"). Danach könntest du mit extLinks = $('a[rel="external"]'); nach allen <a>-Tags suchen, welche eben dieses Attribut bekommen haben. In einer darauf folgenden if-Abfrage prüfst du dann ob externe Links mit diesem Attribut vorhanden sind und lädst dann deine Dateien (CSS und JavaScript) und initialisierst das jQuery-Plugin auf deine externen Links. Sollte so funktionieren (ungetestet):

// page init
jQuery(function(){
	var extLinks;
	$('a').filter(function(){return this.hostname && this.hostname !== location.hostname}).attr('rel','external');
	$('.external-link').filter(function(){return true}).attr('rel','external');
	extLinks = $('a[rel="external"]');
	if (extLinks.length > 0) {
		$.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {
			$("head").append("<style type='text/css'>" + css + "</style>");}
		);
		$.getScript("../../Main-Theme/js/jquery.leaveNotice.min.js", function(data, textStatus, jqxhr) {
			extLinks.leaveNotice({
				siteName:"LeaveNotice Test Page"
			});
		});
	}
});

 

[dbarthel]

In deinem Code fehlt jetzt aber der Aufruf von

$('[rel="external"]')
.click( usw.

Und somit der Aufruf von "externallinkconfirm()"

für alle externen Links, ohne die Klasse "external-links".

Kann ich das einfach danach anhängen?

Denn mit deinem Code würde doch jetzt für alle ext Links das Plugin geladen, oder?

(Es soll aber NUR für ext Links aufgerufen werden, die die Klasse "external-links" haben, alle anderen ext Links sollten weiterhin den Dialog aus der Funktion "externallinkconfirm" verwenden.)

Also wo müsste dann der oben genannte Rest hin?

(Vielleicht kannst das

$('[rel="external"]')
.click( usw.

noch in deinem Code integrieren?
(Wäre sehr nett von dir.))

 

[miniA4kuser]

Benötigst du für die externen leaveNotice-Links dat Attribut rel="external"? Wenn nicht dann evtl so (ungetestet):

// page init
jQuery(function(){
	var extLinks;
	$('a').filter(function(){return this.hostname && this.hostname !== location.hostname}).attr('rel','external');
	$('a[rel="external"]').click(function (e) {
		e.preventDefault();
		externalLinkConfirm($(this).attr('href'));
	}).each( function () {
		$(this).attr('title', $(this).prop('title') + ' (external link)');
	});
	extLinks = $('a.external-link');
	if (extLinks.length > 0) {
		$.get("../../Main-Theme/css/jquery.leaveNotice.css", function (css) {
			$("head").append("<style type='text/css'>" + css + "</style>");}
		);
		$.getScript("../../Main-Theme/js/jquery.leaveNotice.min.js", function(data, textStatus, jqxhr) {
			extLinks.leaveNotice({
				siteName:"LeaveNotice Test Page"
			});
		});
	}
});