web-dev-qa-db-fra.com

Meilleure façon d'exécuter js uniquement sur une page spécifique

Je me demandais quel serait le meilleur moyen d'exécuter un code de script Java uniquement sur des pages spécifiques.

Imaginons que nous ayons un site Web basé sur des modèles, une règle de réécriture pour le contenu est défini, un jquery disponible et cela ressemble en gros à ceci:

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

le contenu 'info' contient un bouton, nous voulons que quelque chose se passe au clic, le contenu 'alerte' devrait donner comme message, lorsque vous survolez un champ de texte.

Quel est le meilleur moyen de déclencher cette action, sans rencontrer d'erreur, car l'objet n'est pas trouvé?

Première option: utiliser 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');
           }
    }

Deuxième option: vérifier l'existence d'éléments 

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

Troisième option: inclure le script dans le modèle chargé 

//stands for itself

Est-ce que leur une meilleure solution? Ou dois-je m'entendre avec l'une de ces solutions?

Votre expérience, votre utilisation ou tout lien lié à ce sujet est apprécié.

//MODIFIER:  

J'aurais peut-être choisi un mauvais exemple, le code actuel ressemblerait à quelque chose comme:

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

où le constructeur myPicture obtient le contexte de l'élément canvas et génère une erreur si mCanvas n'est pas défini.

javascriptjqueryhtmlperformance
44
Johannes Staehlin

Une approche légèrement différente de la vérification du chemin d’URL: vous pouvez regrouper des gestionnaires d’événements spécifiques à une page dans une seule fonction, puis dans chaque inclusion, un domready qui appellera ces fonctions.

Par exemple: dans script.js vous avez deux fonctions (en dehors de domready) à savoir. onPage1Load() et onPage2Load().

Dans votre page1.php, vous avez un $(document).ready(onPage1Load) Et ainsi de suite pour les autres pages. Cela garantira que les gestionnaires d'événements non souhaités ne sont pas enregistrés.

10
Nikhil

Définissez un attribut class sur votre balise body.

<body class="PageType">

Et puis dans votre script ..

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

J'utiliserais l'instruction switch et une variable. (J'utilise 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

Cela vous permettra de changer le "bouton" en fonction de la page sur laquelle vous vous trouvez. Si j'ai bien compris votre question, c'est ce que je ferais. De plus, si je servais beaucoup de javascript, j’ajouterais simplement un nouveau fichier JS.

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;
}

J'espère que cela t'aides -

À votre santé.

12
Ohgodwhy

Vous pouvez utiliser Require js (RequireJS est un chargeur de fichiers et de modules JavaScript) et charger un script s’ils ne sont nécessaires. Link is http://requirejs.org/ , Je sais que l’utilisation d’un besoin n’est pas si facile.

0
Sanjib Debnath