IT story

href 표현은 무엇입니까

hot-time 2020. 5. 5. 19:37
반응형

href 표현은 무엇입니까 하다?


웹 페이지에서 때때로 다음과 같은 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>

이것을 참조하십시오 :

<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>

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

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

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

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


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

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


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

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

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


So its used to write js codes inside of href instead of event listeners like onclick and avoiding # links in href to make a tags valid for html.

I had a research on how to use javascript: inside of href attribute.

<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>

Through this code, you can even write js codes there instead of only calling functions.


Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)

Tested in Firefox Quantom 61.0.1 (64-bit)


The best way to always render a link properly is with the css as follows:

a {cursor: pointer !important}

One should avoid to follow un-necessary things like mentioned in the thread.

참고URL : https://stackoverflow.com/questions/7755088/what-does-href-expression-a-href-javascript-a-do

반응형