JavaScript가있는 유용한 하이퍼 링크

그곳에서 당신은 웹 사이트를 행복하게 서핑하고 있습니다. 링크를 클릭하고 갑자기 파일을 다운로드하도록 요청받는 다른 사이트에서 갑자기 자신을 찾습니다. 거기서 무슨 일이 있었나요? 짜증나 지 않습니까? 방문자에게 링크가 진행되는 곳과 어떤 유형의 파일을 나타내는 더 좋은 방법이 있어야합니다. 따라서이 작은 성가심을 해결하기 위해 파일 확장 및 위치에 따라 링크 후에 꽤 작은 아이콘을 추가하는 약간의 JavaScript와 CSS를 작성하여 사용자에게로드하려는 문서 유형을 나타냅니다.

.

여기에서 코드를 다운로드하고 예제를 볼 수 있습니다.

키 테이크 아웃 이 기사는 하이퍼 링크 옆에 아이콘을 추가하기위한 JavaScript 및 CSS 솔루션을 제공하여 링크가 이끄는 파일 유형을 나타내거나 링크가 외부 사이트로 이어지는 경우를 나타냅니다. 이 솔루션은 명확한 시각적 신호를 제공하여 사용자 경험을 향상시키는 것을 목표로합니다. 솔루션은 간단하고 사용하기 쉽고 IE6을 포함한 모든 최신 브라우저와 호환되도록 설계되었습니다. CSS 또는 JavaScript가 비활성화 될 때 우아하게 저하되고 파일 사용을 하나의 JavaScript 파일과 하나의 CSS 파일로 제한합니다. 솔루션에는 JavaScript 파일 (ikonize.js)과 CSS 파일 (ikonize.css)을 작성해야합니다. JavaScript 파일은 각 하이퍼 링크의 파일 확장을 결정하고 적절한 CSS 클래스 및 아이콘을 추가합니다. CSS 파일에는 아이콘 클래스가 포함되어 있습니다 솔루션에는 한계가 있습니다. 쿼리 문자열 기반 탐색 링크를 인식하지 못하고 링크에는 아이콘을 지정하려면 파일 확장자가 있어야합니다 (외부 사이트가 아닌 한). CSS가 비활성화되면 외부 링크 아이콘 만 표시되고 JavaScript가 비활성화되면 페이지가 표시되지 않습니다.

짧은 이 기능을 만들 때 주요 고려 사항은 다음과 같습니다

단순성 - 사용하기 쉬워야합니다

우아한 황폐화 - CSS 또는/및 JavaScript의 경우
• 최소 파일 사용 - 하나의 JavaScript와 하나의 CSS 파일 만 만 사용합니다. 가능한 한 플러그 앤 플레이-사이트에 신속하게 추가 할 수 있습니다
전체 코드 금액을 제한
• ie6
• 를 포함한 모든 현대식 브라우저와의 호환성
왜 CSS 전용 솔루션에서 멀어 지는가?
• 속성 선택기를 사용하여 CSS에서 이미이 작업을 수행 할 수 있습니다. 예는 다음과 같습니다.
그래서 대부분의 최신 브라우저가 CSS 만 사용하여 아이콘을 표시 할 때 왜 스크립트로 수행 하시겠습니까?

대답은 간단합니다 : IE6. 모든 괜찮은 브라우저는 IE6을 제외하고 CSS3 속성 선택기를 지원합니다. CSS를 사용한이 스크립팅은 IE6을 훌륭하게 재생합니다. 실제로, 그것은 심지어 IE5.5에서도 작동합니다.

영감과 신용 우리가 시작하기 전에 Famfamfam의 Mark James의 우수하고 무료 - 실크 아이콘을 인정하고 싶습니다.

또한 신용이 필요한 위치 :이 기사는 Alexander Kaiser의 CSS와 함께 Iconize TextLinks에서 영감을 얻었으며 CSS Guy가 CSS와 함께 하이퍼 링크 큐를 보여주는 Ask에서 영감을 얻었습니다. 또한 Sitepoint의 James Edwards가 작성한 몇 가지 훌륭한 기능을 사용했으며 Kevin Yank와 Cameron Adams가 작성한 Core JavaScript 라이브러리에서 몇 가지를 더 많이 사용했으며 Sitepoint 책에서 JavaScript에서 불멸화되었습니다. 그래서 어떻게 작동합니까? 글쎄, 간단히 말해서 : 우리는 페이지의 모든 링크를 가져 와서 링크가 링크 된 파일 확장자를 작성한 다음 링크 다음에 적절한 아이콘을 추가합니다. 멋진.

모든 것이 작동하기 위해서는 세 가지 파일이 관련되어 있습니다.

링크가 포함 된 html 페이지, index.html

아이콘 클래스를 포함하는 CSS 파일, ikonize.css

CSS 클래스와 아이콘을 링크에 추가하는 javaScript 파일, ikonize.js

빠른 시작 방법 이제, 당신이 whys and wherefores를 회피하고 페이지에 추가하고 싶다면 다음은 짧은 버전입니다.

페이지 헤더의 javaScript 및 CSS 파일에 링크를 추가하십시오 (사이트 설정에 맞게 파일 참조를 변경).

아이콘 폴더를 사이트에 올려 놓고 ikonize.css 파일에서 URL 참조가 올바른지 확인하십시오. javaScript 함수를 호출하여 닫는 바디 태그 직전에 포함 된 스크립트 태그에서 iKONIZE :

참조 - 사용하기가 간단하다고 말했습니다!

단순성을 위해 DOM이로드 된 후 HTML 내에서 함수를 호출하기로 결정했습니다. JavaScript를 사용하여이를 달성하는 다른 방법이 있지만이 기사의 범위를 벗어납니다.
1. 전체 설명 자신을 편안하게 만들면 내면의 작업을 탐구 할 것입니다.
구성 물건을 단순하게 유지하는 정신으로, 대부분의 설정은 이미 당신을 위해 이루어졌습니다. 아이콘이나 파일 확장자를 변경 해야하는 경우 만 구성을 변경하면됩니다. 이러한 변경 사항은 JavaScript (ikonize.js)와 CSS 파일 (ikonize.css). ikonize.js 구성을 구성하십시오 파일 상단에는 모든 구성 변수가 Classprefix, Classexternal 및 ClassicOnloc을 볼 수 있습니다.


3. 아이콘을받을 어떤 링크가 있습니까?
링크가 어떤 유형의 파일을 정의하려면, 파일 확장자를 살펴 봅니다. 파일 유형은 토런트 파일과 같은 고유 아이콘이있는 두 그룹으로 나뉘어져 있으며 동일한 아이콘을 공유하지만 플래시 파일 (.fla 및 .swf)과 같은 다른 파일 확장자가있는 것입니다. 동일한 아이콘을 공유하는 파일 확장자 그룹화는 수백 개의 CSS 클래스 및 아이콘이 있습니다. 이것을 달성하기 위해 나는 두 개의 배열을 만들었습니다.

첫 번째 배열 인 PersialClassArray는 모든 링크의 파일 확장을 개별 아이콘과 보유합니다. CSS 클래스 이름의 기본은 파일 확장자와 동일합니다. 즉, 텍스트 파일은 'txt'로 참조되고 CSS 클래스 이름은 classprefix (이전에 설정)이고 'txt'는 기본 CSS 클래스 이름으로 'ikon_txt'라는 CSS 클래스를 만듭니다.

두 번째 배열 인 ClassArray는 실제로 다차원 배열이지만, 그렇게하지 마십시오. 기본적으로 우리가 사용하려는 아이콘의 종류에 따라 그룹화 된 개별 배열 그룹입니다. 이 배열의 첫 번째 항목은 PersialClassArray입니다 (이 배열은 항상 첫 번째 배열이어야합니다). 다음 배열은 한 가지 중요한 차이점이있는 이전 배열과 유사합니다. 각 배열의 첫 번째 항목은 사용될 CSS 클래스의 이름이며 다음 항목은 해당 클래스가 필요한 파일 확장자입니다. 다음 예에서 .swf 및 .fla 파일 확장자는 'Flash'CSS 클래스와 관련이 있습니다.

참고 : 파일 확장자는 도트를 제외합니다. 즉, xls .xls. 최대 이식성을 위해 사용 된 실제 CSS 클래스 이름에는‘IKON_’과 같은 접두사가있어서 이전에 구성했지만이 배열에서는 항상

항상

접두사를 제외합니다. 따라서 플래시 CSS 클래스는 항상‘ikon_flash’보다는‘플래시’라고합니다. 외부 링크

링크가 외부 사이트인지 확인하려면 현재 페이지의 호스트 이름을 알아야합니다.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

이를 위해 우리는 다음을 사용합니다

이것은 현재 문서의 위치를 ​​가져 와서 QualifyHref 함수를 사용하여 도메인 이름을 가져와 자격을 갖춘 주소와 호스트 이름을 얻을 수있는 parseurl 함수가 있는지 확인합니다. (이 기능 모두 우리 주민 JavaScript 전문가 인 Brothercake에 의해 작성되었으며 그의 블로그 게시물에서 다루었습니다). 나중에 외부 링크에 대한 클래스를 추가하면이 호스트 이름을 사용하여 링크가 사이트 외부에 있는지 여부를 확인합니다. 실제로 작업을 수행하는 코드 이제 document.getEmentsByTagName ( "a")을 사용하여 페이지에서 모든 링크를 가져와야하고 링크의 파일 확장자를 결정해야합니다. 우리는 functions parseurl과 QualifyHref를 다시 사용하여이를 수행합니다.

먼저, a 요소의 href 값을 취하십시오 : linkhref = aelements [iv] .href;

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

다음, 링크에 대한 자세한 정보를 얻으려면 값을 구문 분석합니다. ourl = parseurl (QualifyHref (LinkHref));

그런 다음 링크의 확장자를 가져옵니다 fileExt = ourl.extension;

그런 다음, 우리는이 링크를 통과하고 아이콘이 필요한지 여부를 해결해야합니다. 이것은 조금 까다로워지기 시작합니다. ClassArray와 포함 된 각 배열을 통해 반복해야합니다. 우리는 루프 내에서 루프를 실행하여이를 수행합니다. 예, 그것은 루프의 루프, 루프입니다! 이 털이 많은 코드 조각은 다음과 같습니다
이 링크에는 아이콘이 필요합니까? 아이콘을 추가 해야하는지 확인하려면 링크의 파일 확장을 배열에 나열된 각 확장자와 비교합니다.

외부 사이트에 연결됩니다 링크가 외부 사이트에있는 경우 작업을 수행하는 경우 이전에 구성된 URL 호스트 이름을 구성 영역에서 설정 한 URL과 비교하는 경우입니다.

사실이라면 앵커의 새 이미지 요소를 추가하고 소스와 ID를 추가 한 다음 이미지에 대한 ALT 및 제목 속성을 추가합니다. 이 링크가 다른 사이트로 이동하고 아이콘에 제목 및 alt 속성을 추가 할뿐만 아니라 클래스를 할당하는 대신 추가 아이콘을 추가합니다.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

.

CSS 클래스 지금 CSS 파일로 돌아가 봅시다 여기에 .doc 파일에 아이콘을 추가하는 CSS 클래스가 있습니다. 클래스 이름은‘IKON_’으로 접두사 한 다음 파일 확장‘DOC’에 주목하십시오. 이 클래스는 기본적으로 약간의 패딩을 상단과 하단에 그리고 링크의 오른쪽에 놓습니다. 그런 다음 아이콘의 배경 이미지를 해당 공간에 추가합니다.

외부 링크 아이콘의 경우 약간 다른 클래스 구조를 사용합니다. 우리는 아이콘이 경계가 없는지 확인하기 위해 상단과 하단을 추가합니다.

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

classprefix 변수를 변경 한 경우이 클래스 이름을 일치하도록 변경하는 것을 잊지 마십시오.

제한 링크에는 링크에 아이콘을 할당하려면 (외부 사이트가 아닌 한) 파일 확장자가 있어야합니다. 스크립트는 쿼리 문자열 기반 탐색 링크를 인식하지 못합니다. CSS가 비활성화되면 외부 링크 아이콘 만 표시되고 JavaScript가 비활성화되면 페이지가 표시되지 않습니다.

결론 ikonize는 링크 후 시각적으로 의미있는 아이콘을 추가하는 빠르고 쉬운 방법입니다. 스크립트는 IE5.5에서 작동하며 CSS3 속성 선택기와 독립적으로 작동 할 수 있습니다. 예상대로 스크립트는 잘 저하되고 쉽게 구성됩니다. 유용하다는 것을 알기를 바랍니다!

javaScript 의 하이퍼 링크에 대한 질문이 자주 묻습니다 javaScript를 사용하여 하이퍼 링크를 만들 수 있습니까?

JavaScript를 사용하여 하이퍼 링크를 작성하려면 문서 개체 모델 (DOM)을 조작하는 것이 포함됩니다. 새 앵커 요소를 작성하고 HREF 속성을 설정 한 다음 문서 본문에 추가 할 수 있습니다. 간단한 예는 다음과 같습니다. var link = document.createElement ( 'a'); link.href = "https://www.example.com"; link.textContent = "example.com으로 이동";

문서. 링크하려는 페이지의 URL. 그런 다음 링크의 텍스트를 설정하고 마지막으로 문서 본문에 대한 링크를 추가합니다.

javaScript를 사용하여 하이퍼 링크의 대상을 변경하려면 어떻게 하이퍼 링크의 대상을 '대상'속성을 사용하여 변경할 수 있습니다. 이 속성은 링크 된 문서를 여는 위치를 지정합니다. 새 창이나 탭에서 문서를 열려면 "_blank"로 설정할 수 있습니다. "_self", "_self"는 클릭 한 것과 동일한 프레임에서 문서를 엽니 다. 예는 다음과 같습니다.

var int 속성은 "_blank"로 설정되어 있습니다. 즉, 링크가 새 창이나 탭에서 열린다는 것을 의미합니다.

javaScript를 사용하여 하이퍼 링크에 제목을 추가 할 수 있습니까?

하이퍼 링크의 제목은 '제목'속성을 사용하여 추가 할 수 있습니다. 이 속성은 링크 된 문서의 이름과 같은 링크에 대한 추가 정보를 제공하며 마우스가 링크 위로 이동할 때 툴팁으로 종종 표시됩니다. 예는 다음과 같습니다.
var link = document.createElement ( 'a'); link.href = "https://www.example.com"; link.title = "examp.com으로 이동";
link.textContent = "example";
javascript를 사용하여 하이퍼 링크를 제거 할 수있는 방법
'removechild'메소드를 사용하여 하이퍼 링크를 제거 할 수 있습니다. 이 메소드는 지정된 요소의 지정된 하위 노드를 제거합니다. 예는 다음과 같습니다.

var link = document.getElementById ( 'myLink');

링크. JavaScript를 사용하여 하이퍼 링크의 텍스트를 변경하려면 'TextContent'속성을 사용하여 하이퍼 링크의 텍스트를 변경할 수 있습니다. 이 속성은 지정된 노드의 텍스트 내용과 모든 후손의 텍스트 내용을 설정하거나 반환합니다. 예는 다음과 같습니다.

var link = document.getElementById ( 'myLink'); link.textContent = "새 링크 텍스트";

이 코드에서 먼저 ID로 링크 요소를 가져온 다음 텍스트 내용을“새 링크 텍스트”로 변경합니다. '스타일'속성을 사용하여 스타일링했습니다. 이 속성은 요소에서 인라인 스타일을 추가, 변경 또는 제거하는 데 사용됩니다. 예는 다음과 같습니다.

var link = document.getElementById ( 'myLink'); link.style.color = "red";
link.style.fontsize = "20px";
이 코드에서 링크 요소를 먼저, 우리는 색상을 빨간색으로 변경합니다. javaScript를 사용하여 하이퍼 링크를 듣는 사람?

'addeventListener'메소드를 사용하여 이벤트 리스너를 하이퍼 링크에 추가 할 수 있습니다. 이 메소드는 이벤트 핸들러를 지정된 요소에 첨부합니다. 예는 다음과 같습니다.

var link = document.getElementById ( 'myLink'); alert ( '링크를 클릭했습니다!');

});

}); ind with event at at aitter. 링크가 클릭되면 경고 상자가 표시됩니다.
javaScript를 사용하여 하이퍼 링크가 URL을 따르는 것을 방지하는 방법은 무엇입니까?
'예방 링크'메소드를 사용하여 URL을 따르는 것이 방지 될 수 있습니다. 이 메소드는 취소 가능한 경우 이벤트를 취소하므로 이벤트에 속하는 기본 조치가 발생하지 않습니다. 예는 다음과 같습니다.
var link = document.getElementById ( 'myLink');
JavaScript를 사용하여 파일을 다운로드하는 하이퍼 링크를 어떻게 만들 수 있습니까?
'다운로드'속성을 사용하여 파일을 다운로드 할 수있는 하이퍼 링크를 작성할 수 있습니다. 이 속성은 사용자가 하이퍼 링크를 클릭하면 대상이 다운로드되도록 지정합니다. 예는 다음과 같습니다.

var link = document.createElement ( 'a'); link.href = "https://www.example.com/myfile.pdf" ;

>> link.download ="myfile.pdf "; hoce 그런 다음 다운로드 속성을 파일 이름으로 설정하고 마지막으로 문서 본문에 대한 링크를 추가합니다. JavaScript를 사용하여 이메일 클라이언트를 엽니 다하는 하이퍼 링크를 어떻게 만들 수 있습니까?

HREF 속성의 'Mailto :'프로토콜을 사용하여 이메일 클라이언트를 열 수있는 하이퍼 링크를 만들 수 있습니다. 이 프로토콜을 사용하면 새 메시지를 보낼 준비가 된 새 메시지로 사용자의 이메일 클라이언트가 엽니 다. 예는 다음과 같습니다.

var link = document.createElement ( 'a'); link.href = "mailto : examplo : exampto : email@example" 그런 다음 링크의 텍스트를 설정하고 마지막으로 문서 본문에 대한 링크를 추가합니다.

위 내용은 JavaScript가있는 유용한 하이퍼 링크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!