JavaScriptを使用した役立つハイパーリンク

そこにあなたは喜んでウェブサイトをサーフィンしています。リンクをクリックして、突然ファイルをダウンロードするように求められている別のサイトにいることに気付きます。そこで何が起こったのですか？迷惑ですね。リンクがどこに向かっているのか、どのタイプのファイルに訪問者に示すためのより良い方法が必要です。したがって、このちょっとした迷惑を解決するために、私はリンクの後にかなり小さなアイコンを追加するJavaScriptとCSSを、ファイルの拡張機能と場所に応じて、ユーザーにロードしようとしているドキュメントのタイプを示すように書きました。

こちらからコードをダウンロードして、例を参照してください。

キーテイクアウト

この記事は、ハイパーリンクの横にアイコンを追加するJavaScriptおよびCSSソリューションを提供します。リンクが導くファイルのタイプを示します。リンクが外部サイトにつながる場合。このソリューションは、明確な視覚的な手がかりを提供することにより、ユーザーエクスペリエンスを向上させることを目的としています。
• ソリューションは、シンプルで使いやすく、IE6を含むすべての最新のブラウザーと互換性があるように設計されています。 CSSまたはJavaScriptが無効になっていると優雅に劣化し、1つのJavaScriptファイルと1つのCSSファイルにファイルの使用を制限します。
ソリューションには、JavaScriptファイル（ikonize.js）とCSSファイル（ikonize.css）の作成が含まれます。 JavaScriptファイルは、各ハイパーリンクのファイル拡張子を決定し、適切なCSSクラスとアイコンを追加します。 CSSファイルには、アイコンクラスが含まれています
• ソリューションには制限があります。クエリ文字列ベースのナビゲーションリンクを認識しておらず、リンクにはアイコンが割り当てられるためのファイル拡張子が必要です（外部サイトでない限り）。 CSSが無効になっている場合、外部リンクアイコンのみが表示され、JavaScriptが無効になっている場合、ページに目に見える変更はありません。
• brief
この機能を作成する際の主な考慮事項は、
• でした

シンプルさ - 使いやすい

優雅な劣化 - CSSまたは/およびJavaScriptが無効になっている場合

1. ファイルの最小限の使用 - 1つのJavaScriptと1つのCSSファイルのみ


2. プラグアンドプレイをできるだけプラグアンドプレイします。これをサイトにすばやく追加できますコード全体の量を制限する
   
3. IE6

を含むすべての最新のブラウザとの互換性
なぜCSSのみのソリューションから離れるのか？

5. 属性セレクターを使用して、既にこれをCSSで実行できます。例を次に示します：


6. では、ほとんどの最新のブラウザがCSSのみを使用してアイコンを表示するのに、なぜスクリプトでそれを行うのですか？
答えは簡単です：IE6。すべての適切なブラウザは、IE6を除くCSS3属性セレクターをサポートしています。 CSSを使用したこの少しのスクリプトは、IE6がうまく再生されるようになります。実際、IE5.5。
でも機能します

インスピレーションとクレジット

始める前に、この記事で使用するFamfamfamのMark Jamesによる優れた、無料のシルクのアイコンを認めたいと思います。

また、クレジットが期限を迎えるクレジット：この記事は、Alexander KaiserのCSSを使用したTextLinkを象徴する作品に触発されました。さらに、SetePointの非常に独自のJames Edwardsによって書かれたいくつかの優れた機能を使用し、Kevin YankとCameron Adamsによって書かれ、SitePoint Book、Simply Javascriptに不死化されたコアJavaScriptライブラリからさらにいくつか撮影しました。

では、どのように機能しますか？
まあ、一言で言えば、ページ内のすべてのリンクを取り、リンクするファイル拡張子を作成し、リンクの後に適切なアイコンを追加します。ニース。
すべてが機能するようにするには、3つのファイルが関係しています。
リンクを含むHTMLページ、index.html
アイコンクラスを含むcssファイル、ikonize.css
1. 
   cssクラスとアイコンをリンクに追加するJavaScriptファイル、ikonize.js

クイックスタートメソッド
さあ、理由と場所を避けたいなら、それをページに追加したい場合は、短いバージョンを次に示します。
ページのヘッダー内のJavaScriptおよびCSSファイルへのリンクを追加します（サイトのセットアップに合わせてファイル参照を変更します）。

アイコンフォルダーをサイトに掲載し、URL参照がikonize.cssファイルで正しいことを確認してください。
1. JavaScript関数を呼び出してください。閉じるボディタグの直前に含まれるスクリプトタグからikonize：
   
   


2. 参照 - 使いやすいと言った！

簡単にするために、DOMがロードされた後、HTML内から関数を呼び出すことを選択しました。 JavaScriptを使用してこれを達成する他の方法がありますが、これらはこの記事の範囲を超えています。
3. 
   完全な説明

自分を快適にしてください、私たちは内部の仕組みを掘り下げます。

構成

物事をシンプルに保つ精神で、セットアップのほとんどはすでにあなたのために行われています。アイコンを変更したり、拡張機能をファイルしたりする必要がある場合にのみ、構成を変更する必要があります。これらの変更を行うには、JavaScript（ikonize.js）とCSSファイル（ikonize.css）の2つの場所があります。

ikonize.js

を構成します ファイルの上部には、すべての構成変数が表示されます：ClassPrefix、Classexternal、およびClassicOnloc。

どのリンクがアイコンを受信しますか？

リンクがどのタイプのファイルを使用するかを定義するには、ファイル拡張子を確認します。ファイルタイプは、2つのグループに分割されます。Torrentファイルなどの一意のアイコンと同じアイコンを共有するものですが、Flashファイル（.flaおよび.swf）などのファイル拡張機能が異なります。 同じアイコンを共有するファイル拡張機能のグループ化により、数百のCSSクラスとアイコンがあることが保存されます。これを達成するために、2つの配列を作成しました

最初の配列である個々のクラッサレイは、個々のアイコンを含むすべてのリンクのファイル拡張機能を保持します。 CSSクラス名のベースは、ファイル拡張子と同じです。つまり、テキストファイルは「TXT」で参照され、CSSクラス名はclassPrefix（以前に設定）で、「TXT」はベースCSSクラス名です。
2番目の配列であるClassArrayは、実際には多次元配列ですが、それを延期させないでください。基本的に、使用したいアイコンの種類に従ってグループ化された個々の配列のグループです。このアレイの最初のアイテムは、個別のクラッサレイです（この配列は常に最初の配列でなければなりません）。次の配列は、1つの重要な違いを持つ以前の配列に似ています。各配列の最初のアイテムは、使用されるCSSクラスの名前であり、次のアイテムはそのクラスが必要なファイル拡張子です。次の例では、.swfおよび.flaファイル拡張機能は、「フラッシュ」CSSクラスに関連付けられます。
注：ファイル拡張子はドットを除外します。つまり、xlsではありません。

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クラス名には、以前に構成した「ikon_」などのプレフィックスがありますが、これらの配列では、常に

プレフィックスを除外します。 したがって、フラッシュCSSクラスは、「ikon_flash」ではなく常に「フラッシュ」と呼ばれます。

外部リンク

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

リンクが外部サイトであるかどうかを把握するには、現在のページのホスト名を知る必要があります。

このためには、

を使用します これにより、現在のドキュメントの位置が取得され、QualifyHREF関数を使用してドメイン名を取得して、完全に適格なアドレスとホスト名を取得するためにParseurl関数があることを確認します。 （これらの機能は両方とも、居住者のJavaScriptのGuru、Brothercakeによって書かれ、彼のブログ投稿で説明されています）。 後で、外部リンクのクラスを追加すると、このホスト名を使用して、リンクがサイトの外部であるかどうかを確認します。

実際に作業を行うコード
document.getElementsByTagname（ "A"）を使用してページからすべてのリンクを取得し、リンクのファイル拡張子を決定する必要があります。

関数parseurlとvatififiehrefを再度使用してこれを行います。

最初に、A要素のHREF値を取得します：

linkhref = aelements [iv] .href;

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

次に、値を解析してリンクに関する詳細情報を取得します。 ourl = parseurl（qualifiehref（linkhref））;

次に、リンクの拡張子を取得します：
fileext = ourl.extension;

次に、これらのリンクをループして、アイコンが必要かどうかを解決する必要があります。これは、少しトリッキーになり始めた場所です。 ClassArrayとそれに含まれる各配列をループする必要があります。ループ内でループを実行することにより、これを行います。はい、それはループ、ループ、ループです！ この毛むくじゃらのコードは次のようになります：

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

このリンクにはアイコンが必要ですか？

アイコンを追加する必要があるかどうかを確認するには、リンクのファイル拡張子と配列にリストされている各拡張機能と比較します。

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.

外部サイトへのリンク

リンクが外部サイトにある場合にワークアウトすることは、以前に決定したURLホスト名を構成領域に設定したURLと比較するだけの場合です。

それが本当なら、アンカーに新しい画像要素を追加し、ソースとIDを追加してから、画像のALTとタイトル属性を追加します。クラスを割り当てるだけでなく、追加のアイコンを追加して、このリンクが別のサイトに表示されることを明確に示すだけでなく、アイコンにタイトルとALT属性を追加します。

externalIconLoc is the location of the image to use for the external icon.

CSSクラス
今すぐCSSファイルに戻りましょう。

IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');

CSSクラスが.docファイルにアイコンを追加するためのCSSクラスです。クラス名には「ikon_」が付いていて、ファイル拡張子「doc」が付いています。このクラスは、基本的に、リンクの上部と下部、右側に少しのパディングを置きます。次に、アイコンの背景画像をそのスペースに追加します。

外部リンクアイコンでは、わずかに異なるクラス構造を使用します。アイコンがボーダレスであることを確認するために、上部と下部を追加します。

ClassPrefix変数を変更した場合は、一致するようにこれらのクラス名を変更することを忘れないでください。

制限

classArray = Array(  <br>
IndividualClassArray,  <br>
Array('flash', 'swf', 'fla')  <br>
);

リンクには、リンクにアイコンが割り当てられているためのファイル拡張子が必要です（外部サイトでない限り）。スクリプトは、クエリ文字列ベースのナビゲーションリンクも認識していません。 CSSが無効になっている場合、外部リンクアイコンのみが表示され、JavaScriptが無効になっている場合、ページに目に見える変更はありません。

結論

url = parseURL(qualifyHREF(document.location.href)).hostname;

Ikonizeは、リンク後に視覚的に意味のあるアイコンを追加するための迅速かつ簡単な方法です。スクリプトはIE5.5で機能し、CSS3属性セレクターとは無関係に機能します。ご想像のとおり、スクリプトはよく分解され、簡単に構成されます。お役に立てば幸いです！

javascriptのハイパーリンクに関するよくある質問

JavaScriptを使用してハイパーリンクを作成するにはどうすればよいですか？

JavaScriptを使用してハイパーリンクを作成するには、ドキュメントオブジェクトモデル（DOM）を操作することが含まれます。新しいアンカー要素を作成し、HREF属性を設定してから、ドキュメントの本文に追加できます。簡単な例は次のとおりです。

var link = document.createelement（ 'a'）;
link.href = "https://www.example.com";
link.textcontent = "go to seamp.com";
document.body.body.appendchild（link）;リンクしたいページのURL。次に、リンクのテキストを設定し、最後にドキュメントの本文にリンクを追加します。この属性は、リンクされたドキュメントを開く場所を指定します。 「_blank」に設定して、新しいウィンドウまたはタブでドキュメントを開くように設定することができます。「_ self」をクリックしたのと同じフレームでドキュメントを開く（これはデフォルトです）、「_ parent」で親フレームのドキュメントを開くか、「_top」を開き、ウィンドウの全身でドキュメントを開きます。例は次のとおりです。


var link = document.createelement（ 'a'）;

link.href = "https://www.example.com";

link.-target = "_blank";

link> textcontent = "go in
JavaScriptを使用してハイパーリンクにタイトルを追加するにはどうすればよいですか？この属性は、リンクされたドキュメントの名前など、リンクに関する追加情報を提供し、マウスがリンクを移動するときにツールチップとして表示されることがよくあります。例は次のとおりです。

var link = document.createelement（ 'a'）;
link.href = "https://www.example.com";
link.title = "go emple.com";
link> textcontent = "emplight in

var link = document.getElementById（ 'mylink'）;

link.parentnode.RemoveChild（link）;

このコードでは、最初にIDでリンク要素を取得し、親ノードから削除します。

javaScriptを使用してハイパーリンクのテキストを変更するにはどうすればよいですか？

ハイパーリンクのテキストは、「テキストコンテンント」プロパティを使用して変更できます。このプロパティは、指定されたノードのテキストコンテンツとそのすべての子孫を設定または返します。例は次のとおりです。

var link = document.getElementbyId（ 'mylink'）;
link.textcontent = "new link text";
このコードでは、最初にリンク要素をIDで取得し、次に「新しいリンクテキスト」に変更します。 「スタイル」プロパティを使用してスタイルを整えました。このプロパティは、要素からインラインスタイルを追加、変更、または削除するために使用されます。例は次のとおりです。

var link = document.getElementById（ 'mylink'）;

link.style.color = "red";

link.style.fontsize = "20px";
このコードでは、最初にリンク要素をIDでadit ad as and as as and as and on on on on on on on on thing as and on the font and on on shid and a shid and on simes and on est and as fort and as fort and as a shid and on javaScriptを使用してハイパーリンクをリスナーにしますか？

「addeventlistener」メソッドを使用してイベントリスナーをハイパーリンクに追加できます。このメソッドは、指定された要素にイベントハンドラーを添付します。例は次のとおりです。

var link = document.getElementById（ 'mylink'）;

link.addeventlistener（ 'click'、function（）{

alert（ 'link！'）;

}）;
ハイパーリンクがJavaScriptを使用してURLに従うことを防ぐにはどうすればよいですか？この方法は、キャンセル可能である場合にイベントをキャンセルします。つまり、イベントに属するデフォルトアクションは発生しません。例は次のとおりです。

var link = document.getElementById（ 'mylink'）;
link.addeventlistener（ 'click'、function（event）{
preventdefault（）;
alert（ 'リンクをクリックしましたが、url。 IDで要素を使用して、クリックイベントリスナーを添付します。リンクがクリックされると、URLに従わなく、代わりにアラートボックスが表示されます。この属性は、ユーザーがハイパーリンクをクリックするとターゲットがダウンロードされることを指定します。例は次のとおりです。

var link = document.createelement（ 'a'）;

link.href = "https://www.example.com/myfile.pdf";

link.download=" myfile.pdf ";
link.textent =" my my my my my my my my file ";このコードでは、最初に新しいアンカー要素を作成し、ダウンロードするファイルのURLにHREF属性を設定します。次に、ダウンロード属性をファイルの名前に設定し、最後にドキュメントの本文にリンクを追加します。

JavaScriptを使用して電子メールクライアントを開くハイパーリンクを作成するにはどうすればよいですか？

メールクライアントを開くハイパーリンクは、HREF属性の「MailTo：」プロトコルを使用して作成できます。このプロトコルは、ユーザーの電子メールクライアントを新しいメッセージで開き、すぐに送信する準備ができています。例は次のとおりです。

var link = document.createelement（ 'a'）;
link.href = "mailto：example@example.com";
link.textcontent = "email me";
document.body.appendChild（link）;
「mailto：example@example.com」。次に、リンクのテキストを設定し、最後にドキュメントの本文にリンクを追加します。

以上がJavaScriptを使用した役立つハイパーリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。