HTML에서 href 대신 JavaScript 함수를 호출하는 방법


86

HTML로 된 모형이 있습니다.

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

요청을 보냈을 때 서버에서 응답을 받았습니다.

이 모형으로 내 코드를 서버로 보내는 AJAX 요청에 대한 응답을 받았습니다.

글쎄, 모든 것이 괜찮지 만 링크를 클릭하면 브라우저가 기능을 링크로 열려고합니다. 클릭하면 주소 표시 줄이

javascript:ShowOld(2367,146986,2)

작동하는 방화범에서 이것을하고 싶다면 URL 인 브라우저를 의미합니다. 이제 누군가가 링크를 클릭하면 브라우저에서 브라우저에서 열기 대신 DOM에 이미로드 된 함수를 호출하려고합니다.


비슷한 질문이 Stackoverflow 자체에서 답변됩니다. stackoverflow.com/questions/1070760/…
Scaria Sebastian

답변:


196

해당 구문은 정상적으로 작동하지만이 대안을 시도해 볼 수 있습니다.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

또는

<a href="javascript:ShowOld(2367, 146986, 2);">

문자열 값에 대한 업데이트 된 답변

문자열을 전달하는 경우 함수의 매개 변수에 작은 따옴표를 사용하십시오.

<a href="javascript:ShowOld('foo', 146986, 'bar');">

인수에서 큰 따옴표를 이스케이프하는 문자열을 전달하는 방법은 무엇입니까? H =이 예제에는 정수만 있습니다.
jeffry은 콥스

1
@jeffrycopps은 함수 내에서 작은 따옴표를 시도
ineedme

@ineedme 답변 해당 정보로 업데이트되었습니다. 감사.
Dutchie432

9

"클릭 이벤트 처리기"만있는 경우 <button>대신 사용하십시오 . 링크에는 특정 의미가 있습니다.

예 :

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

버튼을 버튼 대신 링크처럼 보이게 만드는 방법이 있습니까?
Ben Page

@Ben Page : 예, CSS를 사용합니다. 적어도 당신은 좋은 근사치를 얻습니다. 여기에 내 대답과 의견을 참조하십시오 stackoverflow.com/questions/4842953/or-javascriptvoid0/...
펠릭스 클링에게

7

자바 스크립트를 눈에 띄지 않게 만드십시오.

  • href 속성에 실제 링크를 사용해야합니다.
  • 클릭 이벤트에 리스너를 추가하여 아약스를 처리합니다.

href선택 사항이므로 생략하십시오.
Colin 't Hart

a 태그는 앵커입니다. 링크가 필요하지 않습니다.
Colin 't Hart

5

스팬에 약간의 CSS를 사용하여 다음과 같은 링크처럼 보이게합니다.

CSS :

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML :

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

자바 스크립트 :

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

위의 'url'함수 매개 변수는 실제 URL 대신 "url"문자열을 제공합니다
visrahane

showWindow 함수에 실제 URL을 넣어야합니다. 예 : javascript : showWindow ( ' stackoverflow.com' );
tolsen64

난 안 하드 코드를 할 수있는 내가 DOM을 사용하여 만드는 오전과 나는 URL을 통해 통제가 없기 때문에
visrahane

3

또한 javascript와 HTML을 분리해야합니다.
HTML :

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

자바 스크립트 :

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

ShowOld 함수의 마지막 줄이 다음과 같은지 확인하십시오.

return false;

이렇게하면 브라우저에서 링크가 열리지 않습니다.


1
href선택 사항이므로 생략하십시오.
Colin 't Hart

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">


9
페이지 상단으로 이동하므로 최상의 솔루션은 아닙니다.
Alex Marshall

1
href가 대신 들어 #사용href="javascript:void(0)
나라 얀

1
href선택 사항이므로 생략하십시오.
Colin 't Hart

1

hrefa요소의 경우 선택 사항입니다 .

사용하기에 충분합니다.

<a onclick="ShowOld(2367,146986,2)">link text</a>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.