Лучший способ выполнить JS только на определенной странице - PullRequest
Новая
       2

Лучший способ выполнить JS только на определенной странице

49 голосов
/ 06 марта 2012

Мне было интересно, как лучше всего выполнить код java-скрипта только на определенных страницах.

Давайте представим, что у нас есть веб-сайт на основе шаблонов, правило перезаписи для контента установлено.Доступен jquery, и он в основном выглядит следующим образом: 

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

содержание 'info' содержит кнопку, мы хотим, чтобы что-то происходило при нажатии, содержание 'alert' должно выдавать в виде сообщения, когда вы наводите текстовое поле.

Каков наилучший способ инициировать эти действия, не сталкиваясь с ошибкой, поскольку объект не найден?

Вариант один: использование 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');
           }
    }

Второй вариант: проверка наличия элементов 

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

Вариант третий:включить скрипт в загруженный шаблон 

//stands for itself

Является ли их лучшим решением?Или я должен согласиться с одним из этих решений?

Ваш опыт, использование или любые ссылки, связанные с этой темой, приветствуются.

// РЕДАКТИРОВАТЬ:

Я мог бы выбрать плохой пример, фактический код был бы примерно таким: 

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

, где конструктор myPicture получает контекст элемента canvas и выдает ошибку, если mCanvasне определено.

Ответы [ 4 ]

64 голосов
/ 06 марта 2012

Установите атрибут class для вашего тега body. 

<body class="PageType">

А затем в вашем скрипте .. 

$(function(){
  if($('body').is('.PageType')){
    //add dynamic script tag  using createElement()
    OR
    //call specific functions
  }
});
14 голосов
/ 06 марта 2012

Я бы использовал оператор switch и переменную.(Я использую 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

Это позволит вам изменить действие кнопки на основе страницы, на которой вы находитесь.Если я правильно понял ваш вопрос;это то, что я бы сделал.Кроме того, если бы я обслуживал большое количество javascript, я бы просто полностью добавил новый файл 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;
}

Надеюсь, это поможет -

Приветствия.

10 голосов
/ 06 марта 2012

Немного другой подход, чем проверка пути URL: вы можете сгруппировать обработчики событий для конкретной страницы в одну функцию, а затем в каждом включении иметь domready, который будет вызывать эти функции.

Например: в script.js у вас есть две функции (вне domready), а именно. onPage1Load() и onPage2Load().

Находясь в вашем page1.php, у вас есть $(document).ready(onPage1Load) и так далее для других страниц. Это позволит убедиться, что непреднамеренные обработчики событий не зарегистрированы.

1 голос
/ 04 июля 2017

Вы можете использовать Require js (RequireJS - это загрузчик файлов и модулей JavaScript) и загружать скрипт, если они только нужны.Ссылка http://requirejs.org/, Я знаю, что использовать JS не так просто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...