자바스크립트를 호출하기 위해 링크를 사용하는 방법은?
자바스크립트 코드를 호출하기 위해 링크를 사용하는 방법은?
<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>
편집, 수년 후: 안 돼! 절대 이러지 마!난 어리고 멍청했어요!
편집, 다시:몇몇 사람들이 왜 이렇게 하면 안 되냐고 물었습니다.몇 가지 이유가 있습니다.
프레젠테이션: HTML은 프레젠테이션에 중점을 두어야 합니다.JS를 HREF에 넣는 것은 HTML이 현재 비즈니스 논리를 다루고 있다는 것을 의미합니다.
보안: HTML의 Javascript가 CSP(Content Security Policy)를 위반합니다.CSP(Content Security Policy)는 XSS(사이트 간 스크립팅) 및 데이터 주입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이 되는 추가 보안 계층입니다.이러한 공격은 데이터 도난에서 사이트 손상 또는 악성 프로그램 배포에 이르기까지 모든 작업에 사용됩니다.자세한 내용은 여기를 참조하십시오.
내게 필요한 옵션:앵커 태그는 다른 문서/페이지/리소스에 연결하기 위한 태그입니다.링크가 아무 데도 연결되지 않으면 버튼이어야 합니다.이를 통해 화면 판독기, 점자 단말기 등이 상황을 훨씬 쉽게 파악하고 시각 장애인 사용자에게 유용한 정보를 제공할 수 있습니다.
그리고 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에는 많은 장점이 있습니다. 다음은 사용하는 단계와 사용하기 좋은 이유입니다.
링크가 정상적으로 로드됩니다.
<aid="DaLink" href="http://host/toAnewPage.html">여기를 클릭하십시오.</a>
이것은 자바스크립트가 활성화되지 않은 브라우저나 자바스크립트 코드에 오류가 있을 경우 작동하기 때문에 중요합니다.
Javascript는 페이지 로드 시 실행됩니다.
window.onload = function(){ document.getElementById("DaLink").onclick = function(){ if(funcitonToCall()){ // most important step in this whole process return false; } } }Javascript가 성공적으로 실행되면, Javascript로 현재 페이지의 내용을 로드할 수 있으며, 반환 false는 링크 실행을 취소합니다.다시 말해, 반환 false를 입력하면 Javascript가 성공적으로 실행되면 링크가 비활성화되는 효과가 있습니다.자바스크립트가 실행되지 않는 경우 실행을 허용하면서, 검색 엔진과 코드가 손상되거나 자바스크립트가 아닌 시스템에서 볼 수 있는 경우 콘텐츠가 어느 쪽이든 표시되도록 멋진 백업을 만듭니다.
그 주제에 대한 최고의 책은 제레미 키스의 "돔 스크립션"입니다.
저는 당신이 사용할 수 있다고 생각합니다.onclick이벤트, 다음과 같은 것:
<a onclick="jsFunction();">
또는 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>
단추를 사용하여 링크처럼 스타일을 지정할 수 있습니다. HTML 코드:
button {
width:0.0000000001px;
height:0.00000000001px;
background-color: #ffffff;
color: Blue;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
}<button onclick="function()"><u>Example button</u></button>jquery와 함께 사용하는 @facebook_lucky 응답을 기반으로 합니다.
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});
HTML 코드:
<a id="unobtrusive" href="http://jquery.com">jquery</a>
그냥 단추로 만들어서 링크처럼 스타일링하면 어떨까요?
<button onclick = 'myFunction()' style='background-color: white; border: none; color: blue'>I look like a link</button>
function myFunction() {
alert("the cursor also reacts as if a normal link, while hovering the text; outside of this snippet")
}<button onclick = 'myFunction()'; style='background-color: white; border: none; color: blue; cursor: pointer;'>I look like a link</button>Javascript를 사용하면 됩니다. 예:
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
언급URL : https://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript
'programing' 카테고리의 다른 글
| hashCode()와 getClass()가 네이티브 메서드인 이유는 무엇입니까? (0) | 2023.08.16 |
|---|---|
| 도커에서 UDP 포트를 게시하려면 어떻게 해야 합니까? (0) | 2023.08.16 |
| CSS 높이: 100% 대 높이: 자동 간의 차이 (0) | 2023.08.16 |
| 구조물에 빈 포인터 캐스팅 (0) | 2023.08.16 |
| Swift에서 단추 텍스트 밑줄 표시 (0) | 2023.08.16 |