【JavaScript】リンク
リンクオブジェクト/リンク追加
link リンク追加
links リンクオブジェクトlinkは指定された文字にリンクを追加します。
例
len = document.links.length
リンク数を変数lenに代入する
document.write("to TOP" .link("index.html"))
toTOPの文字にリンクを追加する
サンプル
<html>
<head>
<title>サンプル</title>
<script language="Javascript">
<!--
for(i = 0 ; i < 3 ; i++ ) {
str = "index"+ i + ".html";
document.write("<br />リンク先へ飛ぶ" .link(str));
}
//-->
</script>
</head>
<body>
<h2>リンクオブジェクト/リンク追加</h2>
<input type="button" value="1番目のURL" onclick="alert(document.links[0].href)">
<input type="button" value="2番目のURL" onclick="alert(document.links[1].href)">
<input type="button" value="3番目のURL" onclick="alert(document.links[2].href)">
</body>
</html>アンカー
anchor アンカー追加
anchors アンカーオブジェクトanchorアンカーを追加します。
anchorsアンカー情報を格納しているオブジェクトです
例
num = document.anchors.length
アンカー数を変数numに代入する
サンプル
<html>
<head>
<title>サンプル</title>
<script language="Javascript">
<!--
for(i = 0 ; i < 5 ; i++ ) {
str = "Number" + i;
str = str.anchor("No" + i );
document.write(str, "<br />");
}
function check() {
alert("アンカー数 : " + document.anchors.length);
}
//-->
</script>
</head>
<body>
<h2>アンカー</h2>
<input type="button" value="アンカーオブジェクト" onclick="check()">
</body>
</html>エリア(クリッカブルマップ)
area エリアオブジェクト
クリッカブルマップで定義されるエリアの情報を格納しているオブジェクトです
例
alert(document.Square.href)
Squareという名前のクリッカブルマップのエリアのURLを表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>クリッカブルマップ</h2>
<map name="mMap">
<area name="mArea" shape="rect" cood="0,0,320,24" href="../" onMouseOver="URL='Number 1'">
<area name="mArea" shape="rect" cood="0,25,320,48" href="index.html" onMouseOver="URL='Number 2'">
</map>
<img src="https://pbs.twimg.com/semantic_core_img/1290873752889069569/ofTxmto-?format=jpg&name=small" width="37" height="37" usemap="#mMap">
<table border="1" width="320">
<script language="Javascript">
<!--
cnt = 0;
for(i = 0 ; i < 2 ; i++ ) {
document.write("<tr><td nowrap>URL [", cnt, "]</tr></td>",document.links[cnt++].href, "</td></r>");
}
//-->
</script>
</table>
</body>
</html>ホスト/ホスト名
host ホスト
hostname ホスト名hostはホスト名とボード名を連結したものを返します。
例
alert(location.host)
ホスト名+ボード名をアラートダイアログに表示する
alert(location.hostname)
ホスト名をアラートダイアログに表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>ホスト/ホスト名</h2>
<table border="1" width="320">
<script language="Javascript">
<!--
document.write("<tr><td>host</td><td>", location.host, "</td></tr>");
document.write("<tr><td>hostname</td><td>", location.hostname, "</td></tr>");
//-->
</script>
</table>
</body>
</html>アンカー参照/設定
hash アンカー参照/設定<a name>で指定されたアンカーを参照、設定します
例
doument.link[2].hash = "x12012"
3番目のリンク先アンカー名を"x12012"に設定する
サンプル
<html>
<head>
<title>サンプル</title>
<script language="Javascript">
<!--
function go_last() {
document.links[0].hash = "MS2500";
}
function go_top() {
document.links[0].hash = "MM001";
}
//-->
</script>
</head>
<body>
<h2>アンカー参照/設定</h2>
先頭<br />
<a href="#MM001">ジャンプ</a><br /><br />
<a href="JavaScript:go_top()">先頭にジャンプ</a><br />
<a href="JavaScript:go_last()">末尾にジャンプ</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
末尾<br />
<a href="MS2500">
</body>
</html>ハイパーリンク参照/設定
href ハイパーリンク参照/設定
例
adr = document.links[0].href
先頭にあるリンク先URLを変数adrに代入する
location.href = "https://www.google.com/"
ページアドレス"https://www.google.com/"にする
サンプル
<html>
<head>
<title>サンプル</title>
<script language="Javascript">
<!--
function go() {
location.href = "https://www.google.com";
}
//-->
</script>
</head>
<body>
<h2>ハイパーリンク参照/設定</h2>
<table border="1">
<tr><td>
<a href="JavaScript:go();">googleへ！</a>
</td></tr>
</table>
</body>
</html>ハイパーリンク数
length ハイパーリンク数ハイパーリンク数を返します
<a name>で指定されるアンカーは数に入りません
例
alert(document.links.length)
リンク数をアラートダイアログに表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>ハイパーリンク数</h2>
<a name="MZ">
<a href="1.html">最初のリンク</a><br />
<a href="2.html">2番目のリンク</a><br />
<a href="3.html">3番目のリンク</a><br />
<script language="Javascript">
<!--
document.write("<tr><td>このページのリンク数</td></td>" , document.links.length , "</td></tr>");
//-->
</script>
</body>
</html>ロケーション参照/設定
location ロケーションロケーション(URL)の設定を行います。
locationは設定変更がURLは読み出しのみです
例
alert(document.location)
現在のロケーションをアラートダイアログに表示する
alert(document.URL)
現在のURLをアラートダイアログに表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>ロケーション参照/設定</h2>
<table border="1">
<script language="Javascript">
<!--
cnt = 0;
for( i in location) {
document.write("<tr><td>", i , "</td><td>", location[i] , "</td></tr>");
}
//-->
</script>
</table>
<input type="button" value="URL Click" onclick="alert(document.URL)">
</body>
</html>ドメイン/パス/ポート/プロトコル
domain ドメイン名
pathname パス名
port ポート
protocol プロトコル例
alert(document.domain)
ドメイン名を取得
alert(document.pathname)
パス名を取得
alert(location.port)
ポート名を取得
alert(location.protocol)
プロトコル名を取得
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>ドメイン/パス/ポート/プロトコル</h2>
<table border="1">
<script language="Javascript">
<!--
document.write("<tr><td>domain</td><td>",location.domain, "</td></tr>");
document.write("<tr><td>pathname</td><td>",location.pathname, "</td></tr>");
document.write("<tr><td>port</td><td>",location.port, "</td></tr>");
document.write("<tr><td>protocol</td><td>",location.protocol, "</td></tr>");
//-->
</script>
</table>
</body>
</html>再読み込み/URL変更
reload ページ再読み込み
replace ページURL変更reloadは再度ページ内容を読み込みます
例
location.reload()
現在のページをリロード
location.replace("1.html")
1.htmlにジャンプする
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>再読み込み/URL変更</h2>
<input type="button" value="再読み込み" onclick="location.reload()">
<input type="button" value="URL変更" onclick="location.replace('https://www.google.com')">
</body>
</html>パラメータを渡す
search パラメータに渡す文字列の指定パラメータに渡す文字列を指定します。
例
document.links[0].search = "?name=FK"
リンク先に渡す文字列を"name="FK"にする
alert(location.serach)
現在のURLの?以降の文字列をアラートダイアログに表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>パラメータを渡す文字列</h2>
<table border="1">
</table>
<input type="button" value="文字変更" onclick='location.search="?name=fk"'>
</body>
</html>この記事が気に入ったらサポートをしてみませんか？