자바스크립트를 사용한 앵커 태그의 점진적인 저하

StackOverflow https://stackoverflow.com/questions/467255

문제

저는 현재 웹 애플리케이션에서 AJAX 요청을 수행하기 위해 앵커 태그를 사용하고 있습니다(jQuery 사용).예를 들어:

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

그러나 사용자가 브라우저에서 자바스크립트를 비활성화하면 이러한 앵커 태그는 거의 쓸모가 없게 됩니다.이러한 앵커 태그의 정상적인 성능 저하를 처리하는 가장 좋은 방법은 무엇입니까?양식 태그 내부의 버튼으로 모두 전환하는 유일한 옵션이 있습니까?

편집하다:좀 더 명확하게 설명하고 내 AJAX 호출이 보안상의 이유로 일반 HTTP GET에 노출할 수 없는 URL에 대한 HTTP POST임을 지정해야 합니다(예:삭제 URL "/items/delete/1"을 생각해 보세요).이를 염두에 두고 보안 위험이 있으므로 자바스크립트가 꺼진 사용자를 만족시키기 위해 앵커의 href를 "/items/delete/1"로 변경할 수 없습니다.

도움이 되었습니까?

해결책 3

내가 찾고 있던 대답은 다음 의견 중 하나에 묻혀 있습니다.

당신의 사용 <a> HTTP 사후 작동을 수행하는 태그가 상충됩니다. <a> HTTP Get을 위해 설계되었습니다. 당신은 당신이 당신의 작전의 의미를 <a> 꼬리표. 보다 http://www.w3.org/2001/tag/doc/whentouseget.html

다른 팁

한 가지 옵션 (내가 탐구 할 것이라고 확신하는 것은), JavaScript가있는 사람들을 귀찮게하지 않는 것입니다. a에 메시지를 표시하십시오 <noscript> 사용자에게 귀하의 사이트에 JavaScript가 필요한 것을 알리는 태그.

그것은 두 그룹의 사람들에게 영향을 미칩니다 : 고의로 JavaScript가 장애가 있고 아마도 그것을 다시 켜는 방법을 알고있는 사람들과 오래된 모바일 장치에서 사이트를보고있는 사람들에게 영향을 미칩니다.

이 그룹의 사람들이 몇 시간과 시간을 보내기 전에 얼마나 중요한지 고려하십시오.

간단합니다. 자바스크립트를 사용하지 마세요.최소한 클라이언트에 전달되는 HTML에는 없는 href로서의 URI 구문입니다.

사용자를 원하는 페이지로 안내하는 href를 사용하여 서버에서 HTML을 전달한 다음 앵커 태그의 href를 대체(또는 onclick 이벤트 캡처)하고 원하는 대로 수행하여 기본 작업을 방지하세요. 이벤트 화재를 위해.

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

그리고 나는 Unobtrusive JavaScript를 읽으라는 제안에 전적으로 동의합니다.

에 대해 읽다 눈에 띄지 않는 JavaScript 실제 마크 업에서 JS 동작을 분리하는 방법을 배웁니다. 내가 게시 한 다른 것은 다른 사람이 다른 곳에서 더 잘 말한 것에 대한 다시 해시 일 것입니다.

No-JS에 대한 최선의 방법은 아마도 제출 버튼이있는 양식을 갖고 양식의 조치를 URL에 가리키는 것입니다.

링크처럼 보이도록 버튼을 스타일링 할 수 있습니다.

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

Particletree의 기사에는 스타일링 버튼의 좋은 예가 있습니다. 버튼 요소를 재발견합니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top