링크를 사용하여 JavaScript를 호출하는 방법은 무엇입니까?
링크를 사용하여 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>
그리고 jQuery에 방해가되지 않는 이유는 무엇입니까?
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});
HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>
<a href="javascript:alert('Hello!');">Clicky</a>
몇 년 후 편집 : NO! 이러지마! 나는 젊고 바보였습니다!
다시 한 번 편집 : 두 사람이 왜 이렇게하지 말아야 하는지 물었습니다 . 몇 가지 이유가 있습니다.
프리젠 테이션 : HTML은 프리젠 테이션에 중점을 두어야합니다. JS를 HREF에 넣는 것은 HTML이 이제 비즈니스 로직을 다루는 것을 의미합니다.
Security: Javascript in your HTML like that violates Content Security Policy (CSP). Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Read more here.
Accessibility: Anchor tags are for linking to other documents/pages/resources. If your link doesn't go anywhere, it should be a button. This makes it a lot easier for screen readers, braille terminals, etc, to determine what's going on, and give visually impaired users useful information.
Unobtrusive Javascript has many many advantages, here are the steps it takes and why it's good to use.
the link loads as normal:
<a id="DaLink" href="http://host/toAnewPage.html">click here</a>
this is important becuase it will work for browsers with javascript not enabled, or if there is an error in the javascript code that doesn't work.
javascript runs on page load:
window.onload = function(){ document.getElementById("DaLink").onclick = function(){ if(funcitonToCall()){ // most important step in this whole process return false; } } }if the javascript runs successfully, maybe loading the content in the current page with javascript, the return false cancels the link firing. in other words putting return false has the effect of disabling the link if the javascript ran successfully. While allowing it to run if the javascript does not, making a nice backup so your content gets displayed either way, for search engines and if your code breaks, or is viewed on an non-javascript system.
best book on the subject is "Dom Scription" by Jeremy Keith
Or, if you're using 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>
I think you can use the onclick event, something like this:
<a onclick="jsFunction();">
just use javascript:---- exemplale
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' 카테고리의 다른 글
| Strtotime ()이 dd / mm / YYYY 형식에서 작동하지 않습니다 (0) | 2020.06.04 |
|---|---|
| iOS 시뮬레이터 : 앱을 닫는 방법 (0) | 2020.06.04 |
| AWS 오류 메시지 : 현재이 리소스에 대해 충돌하는 조건부 작업이 진행 중입니다 (0) | 2020.06.04 |
| gradle을 사용하여 APK 파일 이름에서 versionName을 설정하는 방법은 무엇입니까? (0) | 2020.06.04 |
| Cordova 명령 행 인터페이스를 사용하여 서명 된 APK 파일을 작성하는 방법은 무엇입니까? (0) | 2020.06.04 |