링크를 사용하여 JavaScript 코드를 호출하는 방법은 무엇입니까?
답변
<a onclick="jsfunction()" href="#">또는
<a onclick="jsfunction()" href="javascript:void(0);">편집하다:
위의 답변은 실제로 좋은 해결책이 아니며 처음 게시 한 이후 JS에 대해 많이 배웠습니다. 이 문제를 해결하는 더 나은 방법은 아래 의 멸종 위기에 처한 답변을 참조하십시오 .
답변
눈에 잘 띄지 않는 JavaScript, 라이브러리 종속성 없음 :
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>답변
<a href="javascript:alert('Hello!');">Clicky</a>몇 년 후 편집 : NO! 이러지마! 나는 젊고 바보였습니다!
다시 한 번 편집 : 두 사람이 왜 이렇게하지 말아야 하는지 물었습니다 . 몇 가지 이유가 있습니다.
-
프리젠 테이션 : HTML은 프리젠 테이션에 중점을 두어야합니다. JS를 HREF에 넣는 것은 HTML이 이제 비즈니스 로직을 다루는 것을 의미합니다.
-
보안 : HTML의 Javascript는 콘텐츠 보안 정책 (CSP) 을 위반 합니다. CSP (콘텐츠 보안 정책)는 XSS (Cross-Site Scripting) 및 데이터 삽입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이되는 추가 보안 계층입니다. 이러한 공격은 데이터 도용에서 사이트 손상 또는 맬웨어 배포에 이르는 모든 것에 사용됩니다. 자세한 내용은 여기를 참조하십시오 .
-
접근성 : 앵커 태그는 다른 문서 / 페이지 / 리소스에 연결하기위한 것입니다. 링크가 아무데도 가지 않으면 버튼이어야합니다 . 따라서 화면 판독기, 점자 단말기 등이 상황을 파악하고 시각 장애가있는 사용자에게 유용한 정보를 제공하기가 훨씬 쉽습니다.
답변
그리고 jQuery에 방해가되지 않는 이유는 무엇입니까?
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>답변
눈에 잘 띄지 않는 Javascript에는 많은 장점이 있습니다. 여기에 필요한 단계와 사용하기 쉬운 이유가 있습니다.
-
링크는 정상적으로로드됩니다.
<a id=”DaLink” href=”http://host/toAnewPage.html”> 여기를 클릭 </a>
이것은 자바 스크립트가 활성화되지 않은 브라우저에서 작동하거나 자바 스크립트 코드에 작동하지 않는 오류가있는 경우에 중요합니다.
-
자바 스크립트는 페이지로드시 실행됩니다.
window.onload = function(){ document.getElementById("DaLink").onclick = function(){ if(funcitonToCall()){ // most important step in this whole process return false; } } } -
javascript가 성공적으로 실행되면 현재 페이지의 내용을 javascript로로드하면 false가 반환되면 링크 실행이 취소됩니다. 즉, return false를 입력하면 자바 스크립트가 성공적으로 실행 된 경우 링크를 비활성화하는 효과가 있습니다. 자바 스크립트가 실행되지 않는 경우 실행되도록 허용하면서 검색 엔진의 경우와 코드가 깨지거나 자바 스크립트가 아닌 시스템에서 볼 수 있도록 콘텐츠를 멋지게 백업합니다.
주제에 관한 최고의 책은 Jeremy Keith의 “Dom Scription”입니다.
답변
또는 PrototypeJS를 사용하는 경우
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>답변
onclick다음과 같이 이벤트를 사용할 수 있다고 생각합니다 .
<a onclick="jsFunction();">