href 표현식 <a href=“javascript:;”> </a>는 무엇을합니까?

웹 페이지에서 때때로 다음과 같은 href가 사용되는 것을 보았습니다. 그러나 이것이 무엇을하려고하는지 또는 기술을 이해하지 못합니다. 누군가가 자세히 설명해 주시겠습니까?

<a href="javascript:;"></a>

<a>는 어느 쪽인가하지 않는 한 요소는 잘못된 HTML 인 href또는 name속성을.

링크로 올바르게 렌더링하려면 (예 : 밑줄, 손 모양 등) href속성 이있는 경우에만 그렇게 합니다.

따라서 이와 같은 코드는 때때로 링크를 만드는 방법으로 사용되지만 href속성에 실제 URL을 제공하지 않아도됩니다 . 개발자는 분명히 링크 자체가 아무 것도하지 않기를 원했고 이것이 그가 아는 ​​가장 쉬운 방법이었습니다.

그는 아마도 링크를 클릭했을 때 트리거되는 자바 스크립트 이벤트 코드가있을 것입니다. 실제로 발생하고 싶지만 정상적인 <a>태그 링크 처럼 보이기를 원합니다 .

일부 개발자 href='#'는 동일한 목적으로 사용하지만 이로 인해 브라우저가 페이지의 맨 위로 이동하므로 원치 않을 수 있습니다. href=''현재 페이지로 다시 연결되는 링크 이므로 페이지를 새로 고치지 않아도 href를 비워 둘 수 없습니다 .

이런 것들에는 여러 가지 방법이 있습니다. 에 빈 비트의 Javascript 코드를 사용하는 href것이 그중 하나이며 최상의 솔루션은 아니지만 작동합니다.

기본적으로 링크를 사용하여 페이지 (또는 앵커)를 이동하는 대신이 방법을 사용하면 자바 스크립트 함수가 시작됩니다.

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

링크를 클릭하면 경고가 발생합니다.

목적지에 도달하기위한 링크를 피하는 몇 가지 메커니즘이 있습니다. 질문에서 하나는별로 직관적이지 않습니다.

클리너 옵션은 문서에서 정의되지 않은 앵커가있는 href="#no"위치 를 사용 하는 것 #no입니다.

가독성을 높이기 위해 #disable 또는 #action과 같은보다 의미적인 이름을 사용할 수 있습니다.

접근 방식의 장점 :

• empty href = "#"의 "맨 위로 이동"효과 방지
• 자바 스크립트 사용을 피합니다

단점 :

• 문서에서 앵커 이름을 사용하지 않아야합니다.

<a>요소가 링크로 작동하지 않기 때문에 이러한 경우 가장 좋은 옵션은 <a>요소를 사용하지 않고 a <div>를 사용하여 원하는 링크 스타일을 제공하는 것입니다.

<a href="javascript:alert('Hello');"></a>

다음과 같은 속기입니다.

<a href="" onclick="alert('Hello'); return false;"></a>

클릭하면 링크가 전혀 수행되지 않는 방법입니다 (Javascript 이벤트가 바인딩되지 않은 경우).

링크를 따르는 대신 Javascript를 실행하는 방법입니다.

<a href="Javascript: doStuff();">link</a>

실제로 자바 스크립트가 없으면 (예와 같이) 아무것도하지 않습니다.

이것을 참조하십시오 :

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

<a href="javascript:void(0);"></a>

javascript: 브라우저가 자바 스크립트 코드를 작성하게합니다.

오래된 스레드이지만 개발자 가이 구문을 사용하는 이유는 죽은 링크를 만드는 것이 아니라 어떤 이유로 자바 스크립트 URL이 활성 html 요소에 대한 참조를 올바르게 전달하지 않기 때문에 추가한다고 생각했습니다.

예를 들어 자바 스크립트 URL handler_function(this.id)은 onClick아니지만 작동합니다 .

따라서 각 하이퍼 링크에 대한 호출을 수동으로 조정해야하는 표준적인 표준 호환 코드를 작성하거나 한 번 작성하여 어디에서나 사용할 수있는 약간 비표준 코드를 선택할 수 있습니다.

따라서 태그를 HTML에 유효 하게 만들기 위해 링크를 피하고 링크를 피하는 href것과 같은 이벤트 리스너 대신 내부에 js 코드를 작성하는 데 사용되었습니다 .onclick#hrefa

속성 javascript:내부 에서 사용하는 방법에 대한 연구가있었습니다 href.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

이 코드를 통해 함수를 호출하는 대신 js 코드를 작성할 수도 있습니다.

크롬 버전 68.0.3440.106 (공식 빌드) (64 비트)에서 테스트

Firefox Quantom 61.0.1 (64 비트)에서 테스트

항상 링크를 올바르게 렌더링하는 가장 좋은 방법은 다음과 같이 CSS를 사용하는 것입니다.

a {cursor: pointer !important}

스레드에서 언급 한 것과 같이 불필요한 것을 따르지 않아야합니다.