비 자바 스크립트 사용자를위한 프로그래밍

Question

비 자바 스크립트 사용자가 내 사이트에 접근 할 수 있도록하기 위해 자바 스크립트를 사용하지 않고 사이트를 구축하고 사이트를 만든 후에 사이트를 추가했습니다. 그래서

는 지금은 다음과 같은 링크가 :

<a href="http://example.com/panel" id="showPanel">Expand</a> 

를하지만 JavaScript가 활성화되어 있으면, 나는 다음과 같은 코드를 사용합니다

$("#showPanel").attr("href", "#showPanel"); 

이 #showPanel 대신 http://example.com/panel 할 수있는 링크 포인트를 만들기 위해를

이 모든 것이 정상적으로 작동하지만 더 좋은 방법이 있는지 궁금하지 않으십니까?

Answer 1

페이지 맨 아래에 JS 파일을로드하십시오. 페이지가 이미로드 된 후에 실행중인 JavaScript가 문제가 아니어야합니다.

$(document).ready(function() { 
    // change links. 
}); 

당신은 JS의 라인의 원료 수를 줄이기 위해하려는 경우, 당신은 몇 가지 규칙을 따라야하고 URL의 변화 자동화을 시도 할 수 있습니다 : 같은로서,

var changeAllLinks = function() { 
    var allLinks = $("a[href^='http://example.com']"); 
    for (int i = 0; i < allLinks.length; i++) { 
     allLinks[i].attr("href", "#show" + /* substring for the path */); 
    } 
}; 

그냥 아이디어를 (개념적으로) 작동 할 수 있습니다. JS가없는 모든 링크가 <a href="http://example.com/foo">이고 JS가 <a href="#showFoo">으로 변경되는 컨벤션을 따를 수 있습니다. 이렇게하면 경로를 얻기 위해 모든 링크와 하위 문자열을 반복 할 수 있습니다. 먼저 문자를 대문자로 바꾸고 앞면에 #show을 붙인 다음 href 속성에 넣습니다.

Answer 2

이 방법은 매우 지루하다고 말씀하셨습니다. 이것은 나의 주요 관심사에 의한 것입니다. 이를 자동화하는 방법을 찾고 싶을 수도 있습니다. 필자는 rel-attribute를 선택자로 사용하여이 솔루션을 제안했다.

<a href="showThing1" rel="javascriptable">This links via javascript</a> 
<a href="showThing2">Always links to a new page</a> 

// load when ready 
$(document).ready(function() { 
    // Find all links with the correct rel attribute 
    $('a[rel="javascriptable"]').each(function(index) { 
     // Change the href attribute 
     oldlink = $(this).attr('href'); 
     newlink = # + oldlink; 
     $(this).attr('href', newlink); 
    }); 
}); 

내 JQuery와는 그래서 난 복사/붙여 넣기 정말

Answer 3

페이지로드 시간에 대해 너무 많이 걱정하지 마십시오 작동하지 않는 것 같아요 약간 녹슨입니다.
사람이 사이트를 사용할 수있는 시간을 측정하는 것이 아니라 다운로드가 중단되는 데 걸리는 시간을 측정 한 것입니다.

이 일 때 pageload가 페이지를 사용하거나 페이지를 보는 기능을 차단하는 경우가 있습니다. 예를 들어, CSS를로드하기 전에 페이지 상단에 모든 JS를로드하면 예.

는 개인적으로, 나는 당신의 형식 미세 틱이라고 생각하지만 id -assignment을 많이하고있는, 그리고 jQuery를 듣고처럼 그 모습 에 의해 손 끔찍한, 끔찍한 일이.

왜 html5 data-set 속성을 사용합니까?

<a data-linkType="JS-Override" data-methodName="doSomethingInternally">link</a> 

프로그램에서 dataset으로 전화 할 수 있습니다.

var anchors = document.getElementsByTagName("a"); 
[].forEach.call(anchors, function(anchor) { 
    if (anchor.dataset.linkType !== "JS-Override") { return; } 

    var extension = anchor.dataset.methodName; 
    anchor.addEventListener("...", function() { setHash(extension); }, false); 
}); 

매우 간단한 예이지만 작동합니다. 데이터 세트에 대한 지원이 현재 양호합니다. 이전 IE를 포함한 모든 브라우저에서 작동하려면 간단한 API로 래핑해야합니다 (새로운 브라우저는 데이터 세트에서 읽음, 예전 브라우저는 "data-XXX"속성에 대한 속성 목록을 읽어야 함). jQuery는이를 감싸고 있습니다 에 .data();

그리고 물론, 당신은 당신의 페이지에 많은 앵커를 가지고 있을지도 모릅니다. 그리고 그들 중 소수만이 당신이 지금 찾고있는 것을 할 것입니다 ... ... 그래서 트릭 당신이 내부 특별한되는 각 a 것을 알고 있다면, 대안이. 당신이 페이지에있는 모든 a으로 분류되지 않도록 당신이 그들을주는 클래스를 잡아

수 ... 또는 것 페이지, 메뉴 div 또는 설정 div 또는 무엇이든 포함 된 다음 t를 잡아 라. 호스 제품 :

var menu = document.getElementById("myMenu"), 
    jsLinks = menu.getElementsByTagName("a"); 

[].forEach.call(jsLinks, function (anchor) { /* everything mentioned before */ });