web-dev-qa-db-ja.com

特定のページでのみjsを実行する最良の方法

特定のページでのみJavaスクリプトコードを実行する最良の方法は何だろうと思っていました。

テンプレートベースのウェブサイトがあり、コンテンツの書き換えルールが設定されており、jqueryが利用可能であり、基本的に次のようになっていると想像してください。

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

コンテンツ「情報」にはボタンが含まれます。クリックすると何かが発生します。テキストフィールドにカーソルを合わせると、コンテンツ「アラート」がメッセージとして表示されます。

オブジェクトが見つからないため、エラーに陥ることなくこれらのアクションをトリガーする最良の方法は何ですか？

オプション1：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');
           }
    }

オプション2：要素が存在するかどうかを確認する

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

オプション3：ロードされたテンプレートにスクリプトを含める

//stands for itself

彼らの方が良い解決策ですか？または、これらの解決策のいずれかと仲良くしなければなりませんか？

このトピックに関連する経験、使用法、またはリンクを歓迎します。

// EDIT：

悪い例を選んだかもしれませんが、実際のコードは次のようになります：

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

ここで、myPictureコンストラクターはキャンバス要素のコンテキストを取得し、mCanvasが未定義の場合はエラーをスローします。

javascriptjqueryhtmlperformance
50
Johannes Staehlin

URLパスのチェックとは少し異なるアプローチ：ページ固有のイベントハンドラーを1つの関数にグループ化し、各インクルードにこれらの関数を呼び出すdomreadyを設定できます。

例：_script.js_には、2つの関数（domreadyの外部）があります。 onPage1Load()およびonPage2Load()。

_page1.php_には、他のページ用の$(document).ready(onPage1Load)などがあります。これにより、意図しないイベントハンドラが登録されないようになります。

10
Nikhil

Bodyタグにclass属性を設定します。

<body class="PageType">

そして、あなたのスクリプトで..

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

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

お役に立てれば -

乾杯。

15
Ohgodwhy

Require js（RequireJSはJavaScriptファイルおよびモジュールローダー）を使用して、必要な場合のみスクリプトをロードできます。リンクは http://requirejs.org/ です。requirejsの使用はそれほど簡単ではありません。

1
Sanjib Debnath