PageOpen法の違いによるページの開かれ方の違い

HTMLページのOpen法には
1. inputタブのonclickに開くページを指定したwindow.openを仕込む
2. Aタグのhrefに開くページを指定する
方法があるが、それぞれの指定法の違いにより同一ウインドウの同一タブに指定ページが開くことから同一ウインドウの別タブ、他ウインドウに開くまで多種類あるので、その主要なものを添付図にまとめた

ページOpen法とその結果

ページOpen法とその結果

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<form>inputタグ<br />
<input type="button" value="1. window.open" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html')">同一ウインドウ別タブに開く タブが順次開く<br />
<input type="button" value="2. window.open _blank" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '_blank' )">同一ウインドウ別タブに開く 1.と同じ<br />
<input type="button" value="3. window.open 空白" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '')">同一ウインドウ別タブに開く 1.と同じ<br />
<input type="button" value="4. window.open ウインドウ名" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '', 'new')">同一ウインドウ別タブに開く 別タブが出来たら、そのタブに毎回開く<br />
<input type="button" value="5. window.open 空白 サイズ指定" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', 'width=500,height=400')">同一ウインドウ別タブに開く 4.と同じ<br />
<input type="button" value="6. window.open ウインドウ名 サイズ指定" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', 'new', 'width=500,height=400')">別ウインドウに開く 別ウインドウは閉じて、再作成<br />
<input type="button" value="7. window.open location.href" onclick="location.href='http://www.shonan-gloca.com/new/100/10001.html'">同一タブに開く 10.と同じ<br />
</form>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html">10. href</a>同一タブに開く</p>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html" target="_blank">11. href target="_blank"</a>同一ウインドウ別タブに開く 2.と同じ</p>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html" target="new">12. href target="new"</a>同一ウインドウ別タブに開く 4.と同じ</p>

</body>
</html>
カテゴリー: ウェブサイト作成の秘訣 タグ: , , , パーマリンク