wake-up-neo.com

Die beste Möglichkeit, js nur auf einer bestimmten Seite auszuführen

Ich habe mich gefragt, was der beste Weg ist, einen Java-Skript-Code nur auf bestimmten Seiten auszuführen.

Stellen wir uns vor, wir haben eine vorlagenbasierte Website, eine Umschreibungsregel für den Inhalt ist gesetzt, Jquery verfügbar und es sieht im Wesentlichen so aus:

  <!DOCTYPE html>
  <html>
   <head>
    <script src="script.js"></script>
   </head>
   <body>
    ...
    include $content;
    ..
   </body>
</html>

inhalt 'Info' enthält eine Schaltfläche. Wir möchten, dass beim Klicken etwas passiert. Inhalt 'Warnung' sollte als Nachricht angezeigt werden, wenn Sie ein Textfeld anhalten.

Was ist der beste Weg, um diese Aktion auszulösen, ohne dass ein Fehler auftritt, weil das Objekt nicht gefunden wird?

Option eins: Verwenden von window.location.pathname

 $(document).ready(function() {
      if (window.location.pathname == '/info.php') {
          $("#button1").click(function(){'
            //do something
          })
      }else if(window.location.pathname == '/alert.php'){
           $("#mytextfield").hover(){
             alert('message');
           }
    }

Option zwei: Prüfen, ob Elemente vorhanden sind 

$(document).ready(function() {
  if ($("#button1").length > 0) {
      $("#button1").click(function(){'
        //do something
      })
  }else if ($("#mytextfield").length > 0){
       $("#mytextfield").hover(){
         alert('message');
       }
}

Option drei: das Skript in die geladene Vorlage aufnehmen 

//stands for itself

Ist ihre bessere Lösung? Oder muss ich mit einer dieser Lösungen auskommen?

Ihre Erfahrungen, Verwendung oder Links zu diesem Thema werden sehr geschätzt.

// BEARBEITEN:  

Ich könnte ein schlechtes Beispiel gewählt haben, der eigentliche Code wäre etwa so:

    mCanvas = $("#jsonCanvas");
    mMyPicture = new myPicture (mCanvas);

wobei der myPicture-Konstruktor den Kontext des Canvas-Elements abruft und einen Fehler ausgibt, wenn mCanvas undefined ist.

javascriptjqueryhtmlperformance
44
Johannes Staehlin

Ein etwas anderer Ansatz als das Überprüfen des URL-Pfads: Sie können seitenspezifische Ereignishandler in einer einzigen Funktion gruppieren und haben dann in jedem Include einen Domänennamen, der diese Funktionen aufrufen wird.

ZB: In script.js haben Sie zwei Funktionen (außerhalb von außen), nämlich. onPage1Load() und onPage2Load().

In Ihrem page1.php haben Sie eine $(document).ready(onPage1Load) Usw. für andere Seiten. Dadurch wird sichergestellt, dass keine unbeabsichtigten Ereignishandler registriert werden.

10
Nikhil

Legen Sie ein class-Attribut für Ihr body-Tag fest.

<body class="PageType">

Und dann in deinem Skript ..

$(function(){
  if($('body').is('.PageType')){
    //add dynamic script tag  using createElement()
    OR
    //call specific functions
  }
});
59
Robin Maben

Ich würde die switch-Anweisung und eine Variable verwenden. (Ich verwende jQuery!)

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    //code here
    break;
  case "/alert.php":
    //code here
    break;
}

//use windowLoc as necessary elsewhere

Auf diese Weise können Sie die Funktion der "Schaltfläche" basierend auf der Seite ändern, auf der Sie sich befinden. Wenn ich deine Frage richtig verstanden habe; das würde ich tun. Wenn ich große Mengen an Javascript geliefert hätte, würde ich einfach eine neue JS-Datei komplett hinzufügen.

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    var infoJS = document.createElement('script');
    infoJS.type = 'text/javascript';
    infoJS.src = 'location/to/my/info_file.js';
    $('body').append(infoJs);
    break;
  case "/alert.php":
    var alertJS = document.createElement('script');
    alertJS.type = 'text/javascript';
    alertJS.src = 'location/to/my/alert_file.js';
    $('body').append(alertJs);
    break;
}

Hoffe das hilft -

Prost.

12
Ohgodwhy

Sie können Require js (RequireJS ist eine JavaScript-Datei und ein Modul-Ladeprogramm) verwenden und das Skript laden, wenn sie nur benötigt werden. Link ist http://requirejs.org/ , ich weiß, dass die Verwendung von js nicht so einfach ist.

0
Sanjib Debnath