특정 페이지에서만 js를 실행하는 가장 좋은 방법

특정 페이지에서만 자바 스크립트 코드를 실행하는 가장 좋은 방법이 무엇인지 궁금합니다.특정 페이지에서만 js를 실행하는 가장 좋은 방법

컨텐츠 IST 세트에 대한 규칙을 사용할 수 jQuery를 재 작성의 우리가 템플릿 기반의 웹 사이트를 상상하자 그것은 기본적으로 다음과 같습니다 : 콘텐츠를 '정보'는 버튼을 포함

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

, 우리가 원하는

클릭시 발생하는 문제, 텍스트 필드를 가리키면 '경고'콘텐츠가 메시지로 제공되어야합니다.

개체를 찾을 수 없으므로 오류가 발생하지 않고 이러한 작업을 트리거하는 가장 좋은 방법은 무엇입니까?

옵션 하나를 사용하여 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

더 나은 솔루션입니까? 아니면 이러한 솔루션 중 하나와 함께해야합니까?

이 주제에 관한 귀하의 경험, 사용 또는 링크는 높이 평가됩니다.

// 편집 : 나는 나쁜 예를 선택이 끝난 수도

은, 실제 코드가 될 것이다 뭔가 같은 :

myPicture 생성자 GET 캔버스 요소의 컨텍스트를의

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

하고, mCanvas가 미정 도리의 경우는 에러를 슬로우합니다.

출처

2012-03-06 Johannes Staehlin

자바 스크립트를 필요로하는 페이지에만 자바 스크립트를 포함하고 페이지에서'$ (document) .ready'를 두 번 이상 호출 할 수 있으므로 여기에서 안전해야합니다. –

jQuery를 사용하는 경우 이벤트 처리기를 할당하기 전에 요소가 존재하는지 확인할 필요가 없습니다.'$ ("somselector"). click (...)'는 click 처리기를 _zero 또는 more_ 요소에 적용합니다. 일치하는 "someselector"- 일치하는 항목이 없으면 오류를주지 않습니다. – nnnnnn

@IanBishop : 옵션 3입니다 :) - 템플릿을 사용하여 js로드 @ nnnnnn : 편집을 참조하십시오. 그러나 '만'클릭 동작과 관련하여 맞습니다. –

URL 경로를 확인하는 것보다 조금 다른 접근법 : 페이지 별 이벤트 핸들러를 단일 함수로 그룹화 한 다음 각 포함에서 해당 함수를 호출하는 domready를 사용할 수 있습니다.

예 : script.js에는 두 가지 기능 (외부 domready)이 있습니다. onPage1Load() 및 onPage2Load().

page1.php에는 다른 페이지의 경우 $(document).ready(onPage1Load) 등이 있습니다. 이것은 의도하지 않은 이벤트 핸들러가 등록되지 않았는지 확인합니다.

출처

2012-03-06 05:45:51 Nikhil

나는 이것이 일을하는 가장 쉬운 방법이라고 생각하며 읽기 쉽고 디버깅하기 쉽다. 옵션 하나 전 컨트롤러와 같아요하지만 나쁘지 않을 수도 있습니다 혼란에 발생할 수 있습니다. 또한 하드 될 별칭이있을 때. 어떻게 든 이것을 자동화하는 프레임 워크가 있다면 ... 페이지 클래스와 방법 보인다 Logged 또한 좋은 생각. – GorillaApe

나를 위해 가장 효과적이었던 것은 그 페이지에서만 기능을 호출하는 인라인 스크립트를 사용하는 것이 었습니다. – AntonB

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

희망이 도움이 -

건배.

출처

2012-03-06 05:44:03 Ohgodwhy

입니다. jQuery.getScript() 유용한 – Bamboo

js 파일을 다시로드하는 좋은 방법입니다. :) –

body 태그에 class 속성을 설정하십시오.

<body class="PageType">

그리고 스크립트에서

.. 당신이 사용할 수있는

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

출처

2012-03-06 06:22:45

나는 모든 페이지에 클래스 이름을 추가하는 것이 좋습니다. js와 css 모두 – Damon

누군가가이 접근 방식에 대해 클래스 – Neil

의 이름을 바꿀 때까지는 나쁜 생각이 아닙니다. [jQuery'is] (http://api.jquery.com/is/)를 사용하여 – numediaweb

는 JS를 그들이 필요한 경우에만로드 스크립트 (RequireJS는 자바 스크립트 파일과 모듈 로더) 요구합니다. 링크는 입니다. js를 사용하는 것이 너무 쉽지 않음을 알고 있습니다.

출처

2017-07-04 07:26:06

특정 페이지에서만 js를 실행하는 가장 좋은 방법

답변

관련 문제