Ankündigung

Einklappen
Keine Ankündigung bisher.

JS per 'src' einbinden. Im Head funktioniert das Script nicht. Im Body jedoch schon?

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    JS per 'src' einbinden. Im Head funktioniert das Script nicht. Im Body jedoch schon?

    Hallo Leute,

    ich habe mal eine Verständniss-Frage.
    Ich habe danach schon etwas gegoogelt, aber finde leider nichts passendes.
    Es werden zwar viele Gründe genannt warum das Script im HEAD eingebunden werden soll und ein paar Gründe warum im Body. Keines dieser Gründe sind momentan relevant wie ich vermute (z.B. im Head mit Verzögerung des Ladens der Seite usw.)

    Ich mag es bestimmte Bereiche in meinen Projekten zu haben. Im Head z.B. alle Scripte die eingebunden werden sollen und dort auch noch nur in einem Block (also beisammen vom Platz her).

    So, jetzt habe ich eine JS-Datei mit folgendem Inhalt:

    Code:
    $( "#select_value" ).dblclick(function() {
  alert( "Value: "+this.value );
});
    Diese binde ich im HEAD-Bereich meiner HTML ein wie folgt:
    HTML-Code:
    <script src="js/test.js"></script>
    Jetzt habe ich HTML eine SelectBox mit mehreren option-Tags.
    HTML-Code:
      <select name="value[]" multiple="multiple" size="15" class="list_font" style="width: 100%;" id="select_value">
    So, wenn ich nun die script-Datei so wie angegeben einbinde, dann funktioniert das so nicht. Ich kann Klicken, Doppelt-Klicken, Dreifach wenn es sein muss, aber nichts passiert.
    Binde ich die Datei an das Ende meines Bodys ein, so funktioniert das Script tadellos!

    So, wie kann ich es gestalten damit die Script-Datei im Head bleibt, dieses Script aber dennoch funktioniert?
    Stichworte: -
  • #2
    Du kannst den Händler halt nicht hinzufügen bevor das Element da ist. Du kannst aber das hinzufügen des Händlers verzögern bis das Dokument fertig ist indem du ihn in documentReady einbettest. Ob das jetzt besser ist als das JavaScript erst am Ende einzubinden sei mal dahin gestellt.

    Code:
    $(documenta).ready(function()
{
      // hier kommt dein Code rein
});
    Gruss

    Claus
    Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

    Kommentar

    • #3
      Der Übersicht halber ist es sicherlich schöner wenn das Script im Head eingebunden wird. Wenn es sonst keine Nachteile gibt, dann würde ich das gerne so machen.

      Dennoch frage ich mich wie ich dann die 2 Handler unter ein Hut bringen kann?
      Ich habe ja dann den ready-handler des Dokumentes (->Dokument fertig geladen) und den DblClick-Handler.

      Code:
       
 $(documenta).ready(function() {       // hier kommt dein Code rein });
      und

      Code:
       
 $( "#select_value" ).dblclick(function() {   alert( "Value: "+this.value ); });
      Wird das dann 'DblClick' in den 'ready' eingebettet oder das DblClick an den reday verkettet oder wie?

      Kommentar

      • #4
        Zuletzt geändert von Günni; 04.06.2017, 06:47.
        Hi,

        Code:
        $(document).ready(function() {
// Dieser Code wird erst ausgeführt, wenn das Document vollständig geladen ist
});
        . . . ist das Gleiche wie . . .

        Code:
        window.onload = function(){
// Dieser Code wird erst ausgeführt, wenn das Document vollständig geladen ist
};
        . . . ohne JQuery.

        Datei __js_externe_function.js, zum Einbinden in head:

        Code:
        function select_handler(arg){
 alert(arg);
}

        Mit JQuery:

        PHP-Code:
        <!DOCTYPE HTML>
        <        html>
        <        head>
        <        title>Untitled</title>
        <        script src="jquery-1.10.1.js" type="text/javascript"></script>
        <script src="__js_externe_function.js" type="text/javascript"></script>
        <script type="text/javascript">
        <!--
        $(document).ready(function(){
         $("#top5").dblclick(function(){
          select_handler($("#top5 option:selected").text());
         });
        });
        // -->
        </script>
        </head>
        <body>
        <select name="top5" size="5" multiple id="top5">
         <option>Heino</option>
         <option>Michael Jackson</option>
         <option>Tom Waits</option>
         <option>Nina Hagen</option>
         <option>Marianne Rosenberg</option>
        </select>
        </body>
        </html> 

        Ohne JQuery:

        PHP-Code:
        <!DOCTYPE HTML>
        <        html>
        <        head>
        <        title>Untitled</title>
        <        script src="__js_externe_function.js" type="text/javascript"></script>
        <script type="text/javascript">
        <!--
        window.onload = function(){
         var top5 = document.querySelector('#top5');
         top5.addEventListener('dblclick', function(){
          select_handler(this.options[this.options.selectedIndex].text);
         });
        };
        // -->
        </script>
        </head>
        <body>
        <select name="top5" size="5" multiple id="top5">
         <option>Heino</option>
         <option>Michael Jackson</option>
         <option>Tom Waits</option>
         <option>Nina Hagen</option>
         <option>Marianne Rosenberg</option>
        </select>
        </body>
        </html> 
        Gruß
        Günni

        Kommentar

        • #5
          Zuletzt geändert von kaminbausatz; 05.06.2017, 10:38.
          Zitat von Günni Beitrag anzeigen
          Hi,

          Code:
          $(document).ready(function() {
// Dieser Code wird erst ausgeführt, wenn das Document vollständig geladen ist
});
          . . . ist das Gleiche wie . . .

          Code:
          window.onload = function(){
// Dieser Code wird erst ausgeführt, wenn das Document vollständig geladen ist
};
          . . . ohne JQuery.
          i
          Nein Günni, das ist nicht so, wie Du das schreibst..

          Das nachfolgende Beispiel wird Licht in´s Dunkle bringen,

          Bei der jQuery Variante wird H1 gefüllt. bevor das Bild vollständig sichtbar ist.
          Bei der Vanilla Variante wird gewartet bis alles geladen ist.

          Das wird ja auch durch die Properties (load oder ready) ausgedrückt...

          HTML-Code:
              <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        img{width:40%;}
      </style>
      <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
      </script>
      <script>
        /*
        window.onload = function(){
            document
              .querySelector('h1')
              .textContent= 'document loaded'
        };
        */
        $(document).ready(function() {
            document
              .querySelector('h1')
              .textContent= 'document loaded'
        });
      </script>
    </head>
    <body>
      <h1></h1>
      <img src="http://einLinkZuEinem13MBgrossemBild"/>
    </body>
    </html>

          Kommentar

          Vorherige Weiter
          Lädt...
          X