JavaScript プログラミング講座

 

アンカーについて

 


■アンカーについて


<A> タグを使用すると、ハイパーリンクを表示することができます。
 
<A> タグは、 Anchor(アンカー)の略です。
 
<A> タグを使用してハイパーリンクを設置する

<html>
  <body>

    <a href="https://hakuhin.jp/" target="_blank" >ハイパーリンクのテキスト</a>

  </body>
</html>
 
 

■ HTMLAnchorElement インターフェースについて

 
HTMLAnchorElement インターフェースは、<A> タグに相当します。
 
エレメントの一種です。
 
ハイパーリンクを表示するための機能がまとまっています。
 
このページでは、HTMLAnchorElement インターフェースで供給される機能について解説しています。
 
■ HTMLAnchorElement インターフェースの派生について

HTMLAnchorElement インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLAnchorElement
 


 

アンカーを作成する

 
 


■アンカーを作成する

 
■アンカー要素を動的に作成する
 
HTMLAnchorElement オブジェクトを作成するには、document.createElement() メソッドを使用します。
 
引数に、"a" を指定します。
 
動的に HTMLAnchorElement オブジェクトを作成する

// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// 出力テスト
console.log(anchor);
 

■アンカーをブラウザに表示する


HTMLAnchorElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録します。
 
アンカーを任意のノードリストに登録しただけでは、何も表示されません。
 
アンカーを動的に作成して、ノードリストに登録する

// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// BODY のノードリストに登録する
document.body.appendChild(anchor);
 

■任意のエレメントをハイパーリンク化する

 
アンカーのノードリストに、ハイパーリンク化したい任意のエレメントを登録します。
 
アンカーの子孫は、すべてハイパーリンク化されます。
 
ノードリストに登録する方法については、こちらで解説しています。
 
■テキストをハイパーリンク化する例
 
テキストノードを追加する方法は、こちらで解説してます。
 
 
テキストをハイパーリンク化する

// ------------------------------------------------------------
// アンカー
// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// ハイパーリンク先を指定
anchor.href = "http://example.com/";

// BODY のノードリストに登録する
document.body.appendChild(anchor);


// ------------------------------------------------------------
// アンカーに文字列をセットする
// ------------------------------------------------------------
anchor.textContent = "ハイパーリンク!!";
 
■イメージ画像をハイパーリンク化する例
 
イメージ画像については、こちらで解説しています。
 
 
画像をハイパーリンク化する

// ------------------------------------------------------------
// アンカー
// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// ハイパーリンク先を指定
anchor.href = "http://example.com/";

// BODY のノードリストに登録する
document.body.appendChild(anchor);


// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// URL を指定して、画像の読み込みを開始する
image.src = "https://example.com/graphic/title.png";


// ------------------------------------------------------------
// アンカーのノードリストに画像イメージを登録する
// ------------------------------------------------------------
anchor.appendChild(image);
 

■HTMLAnchorElement オブジェクトを取得する

 
■静的な <A> タグから取得する
 
任意のエレメントを取得する方法は、こちらで解説しています。
 
静的な <A> タグから、HTMLAnchorElement オブジェクトを取得する

<html>
  <body>

    <a id="aaa" href="https://hakuhin.jp/" target="_blank" >ハイパーリンクのテキスト</a>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var anchor = document.getElementById("aaa");

	// 出力テスト
	console.log(anchor);

    //-->
    </script>

  </body>
</html>
 
■ name 属性を持つアンカーをまとめて取得する
 
name 属性を持つアンカーのみを取得する事ができます。
 
ブラウザによっては、id 属性を持つアンカーも取得対象となります。
 
doucment.anchors プロパティを使用します。
 
HTMLCollection オブジェクトが得られます。
 
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
 
中には、HTMLAnchorElement オブジェクトが格納されています。
 
name 属性を持つアンカーをまとめて取得する

// ------------------------------------------------------------
// name 属性を持つアンカーをまとめて取得する
// ------------------------------------------------------------
var anchor_list = document.anchors;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = anchor_list.length;
for(i=0;i < num;i++){

	// HTMLAnchorElement オブジェクトを取得する
	var anchor = anchor_list[i];

	// 出力テスト
	console.log(anchor);
}
 
■ href 属性を持つエレメントをまとめて取得する
 
href 属性を持つ要素を、まとめて取得する事ができます。
 
<A> <AREA> 要素などが、取得対象となります。
 
doucment.links プロパティを使用します。
 
HTMLCollection オブジェクトが得られます。
 
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
 
中には、HTMLElement オブジェクトが格納されています。
 
href 属性を持つ要素をまとめて取得する

// ------------------------------------------------------------
// href 属性を持つ要素をまとめて取得する
// ------------------------------------------------------------
var element_list = document.links;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = element_list.length;
for(i=0;i < num;i++){

	// HTMLElement オブジェクトを取得する
	var element = element_list[i];

	// 出力テスト
	console.log(element);
}
 


 

ハイパーリンク先を設定する

 
 


■ハイパーリンク先のアドレスを設定する


ハイパーリンク先のアドレスを設定するには、href プロパティを使用します。
 
リンク先の URL アドレスを、文字列で指定します。
 
Data URI SchemeBlob URL Scheme を指定する事もできます。
 
ハイパーリンク先を設定

// HTMLAnchorElement オブジェクトを作成
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://example.com/";
 

■ターゲットウィンドウを設定する


ターゲットウィンドウを設定するには、target プロパティを使用します。
 
以下の文字列を設定することができます。
 
文字列 説明
_self 現在のフレーム
_blank 新規にウィンドウを開く
_parent 現在のフレームから1つ上(親)のフレーム
_top 現在のフレームの最上位(ルート)のウィンドウ
それ以外の文字列 指定した名前のフレーム
 
ターゲットを設定

// HTMLAnchorElement オブジェクトを作成
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://example.com/";

// ターゲットを設定
anchor.target = "_blank";
 


 

ハイパーリンクを無効化する

 


■ハイパーリンクを無効化する


JavaScript を使って、ページの遷移をキャンセルすることができます。
 
以下のような場合に便利です。
 
JavaScript が使用不可能な場合、直接リンクとして機能させる。
 
JavaScript が利用可能な場合、ページ遷移をキャンセルして、ダイナミックな処理を行う。
 
■クリック時のデフォルトの動作を無効化する
 
リンクをクリックしたか調べるには、onclick イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
MouseEvent オブジェクトから、preventDefault() メソッドを実行します。
 
 
ページの遷移をキャンセルする

<html>
  <body>

    <a id= "aaa" href="http://example.com" >ハイパーリンク!!</a>

    <script type="text/javascript">
    <!--

	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// クリックすると実行される関数
	// ------------------------------------------------------------
	function MouseClickFunc(e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// ページの遷移をキャンセルする
		// ------------------------------------------------------------
		if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
		}else{
			// デフォルトの動作を無効化する(非標準)
			return false;
		}
	}

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	// イベントリスナーに対応している
	if(element.addEventListener){

		// クリックすると実行されるイベント
		element.addEventListener("click" , MouseClickFunc);

	// アタッチイベントに対応している
	}else if(element.attachEvent){

		// クリックすると実行されるイベント
		element.attachEvent("onclick" , MouseClickFunc);

	}else{

		// クリックすると実行されるイベント
		element.onclick = MouseClickFunc;

	}
    //-->
    </script>

  </body>
</html>
 


 

ダウンロード用のリンクを設置する(HTML5 世代)

 


■ダウンロード用のリンクを設置する(HTML5 世代)


■download プロパティについて
 
HTML5 世代の機能です。
 
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element (The a element)
 
Internet Explorer 11 の時点では、動作しません。
 
Safari 7 の時点では、動作しないようです。
 
Opera(Presto 版) では、動作しません。
 
■ダウンロード用のリンクを設置する
 
ダウンロード用のリンクを設置するには、download プロパティを使用します。
 
デフォルトのファイル名を、文字列で指定します。
 
画像のダウンロード用のリンクを設置する

<html>
  <body>

    <a href="https://hakuhin.jp/graphic/title.png" download="my_image.png">ダウンロード!!</a>

  </body>
</html>
 

■自動的にダウンロードを開始する

 
自動的にダウンロードを開始したい場合は、click() メソッドを使用します。
 
任意のバイナリのダウンロードを開始する方法については、こちらで解説しています。
 
画像のダウンロードを自動的に開始する

// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成
// ------------------------------------------------------------
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "https://hakuhin.jp/graphic/title.png";

// ターゲットを設定
anchor.target = "_blank";

// デフォルトのファイル名を指定
anchor.download = "my_image.png";

// ------------------------------------------------------------
// 自動的にダウンロードを開始する
// ------------------------------------------------------------
// ノードリストに登録する
document.body.appendChild(anchor);

// アンカーを手動的にクリックする
anchor.click();
 


 

アンカーのプロパティについて

 


■アンカーのプロパティ一覧

 
HTMLAnchorElement インターフェースで利用可能な、プロパティの一覧です。(一部抜粋)
 
■ HTMLAnchorElement インターフェース
 
プロパティ名説明
hrefStringリンク先の URL アドレスを設定する。
targetStringターゲットウィンドウを設定する。
relStringリンク元とリンク先の関連性を指定する。
hreflangStringリンク先の言語コードを設定する。
typeStringリンク先のコンテンツタイプを設定する。
 
■ HTML5 世代
 
プロパティ名説明
textStringアンカー内のテキストを文字列として取得する。textContent と同等。
downloadStringデフォルトのファイル名を設定する。ダウンロード用のリンクとして機能する。
 
プロパティ名説明
protocolString「リンク先の URL」から「プロトコル」を取得する。
hostString「リンク先の URL」から「ホスト名」 + 「ポート番号」を取得する。
hostnameString「リンク先の URL」から「ホスト名」を取得する。
portString「リンク先の URL」から「ポート番号」を取得する。
pathnameString「リンク先の URL」から「パス名」を取得する
searchString「リンク先の URL」から「クエリ」を取得する。
hashString「リンク先の URL」から「フラグメント識別子」を取得する。
 

■ URL decomposition IDL 属性(HTML5 世代)


リンク先の URL アドレスを分解して取得する事ができます。
 
ターゲットを設定

// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成
// ------------------------------------------------------------
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER";

// ------------------------------------------------------------
// テスト出力
// ------------------------------------------------------------
console.log(anchor.protocol);	// "http:"
console.log(anchor.host);	// "sub.example.com:8080"
console.log(anchor.hostname);	// "sub.example.com"
console.log(anchor.port);	// "8080"
console.log(anchor.pathname);	// "/aaa/bbb/ccc.html"
console.log(anchor.search);	// "?name=taro&age=18"
console.log(anchor.hash);	// "#FRAGMENT_IDENTIFIER"