DEV/WEB
[WEB] 웹 브라우저 좌측 하단 URL 상태바 없애기.(a 태그 href 주소 상태 팝업)
RAMY,LEE
2021. 12. 7. 01:10
안녕하세요~! 레미 입니다.
A link로 마크업된 항목들에 마우스 over하면, 브라우저 창 좌측 하단에
링크 연결된 url의 주소가 뜨는 걸 볼 수 있는데요.
프로젝트에 따라 해당 상태바를 안보이게 처리 해달라는 경우가 있었습니다.
01웹 브라우저 좌측 하단 URL 상태바 없애기
위 예시 이미지를 보시면 좌측 하단에 Url이 뜨는게 보이시죠?
저 부분을 간단한 제이쿼리를 사용하면 안보이게 뚝딱 처리할 수 있답니다.
Code
$("body").on('mouseover', 'a', function (e) {
var $link = $(this),
href = $link.attr('href') || $link.data("href");
$link.off('click.chrome');
$link.on('click.chrome', function () {
window.location.href = href;
}).attr('data-href', href) //href에 지정된 링크 연결을 유지 시킵니다.
.css({ cursor: 'pointer' })
.removeAttr('href'); // 이 부분이 브라우저에서 뜨는 Url 상태바를 안보이게 처리합니다.
});
하지만, 위 코드를 사용할 때 주의해야할 점이 있습니다.
모든 a 태그 대상으로 이벤트를 생성하기 때문에
특정 이벤트가 걸려있거나, Url 상태바를 표시 해야하는 a 링크엔 부가적인 조치가 필요합니다.
$("body").on('mouseover', 'a', function (e) {});
에서 'a' 셀렉터 부분을 'a:not(.enable-url)', 'a.enable-url' 등과 같이 특정 a 태그를 제외하고 선택해주시면 됩니다.
Info
위 코드는 2021.12.09 기준 Chrome, Edge, IE11+, Opera 최신 버전 브라우저에서 동작합니다.
출처