処理の概要
処理のフロー：
(1)テキストボックスのURLを取得する
(2)指定の方法でURLへアクセスする
※遷移出来ない場合は、デフォルトでサーバエラーとなる
画面イメージ
画像１
補足）それぞれ指定のボタンを押下するとテキストボックス内にあるURLに別タブや別ウィンドウで遷移します。
ソースコード
index.html
<body>
<div class="inputtext" id="container">
<input type="text" id="urlInput" value="https://www.google.co.jp/" ><br>
<input type="button" id="urlMoveButton" value="URLの移動をする"><br>
<input type="button" id="urlTabOpenButton" value="別のたぶを開く"><br>
<input type="button" id="urlWindowOpenButton" value="別のウィンドウを開く">
</div>
</body>
main.js
$(function() {
$("#urlMoveButton").click(function(){
var urlMoveText = $("#urlInput").val();
location.href = urlMoveText;
});
$("#urlTabOpenButton").click(function(){
var urlOpenText = $("#urlInput").val();
window.open(urlOpenText, "_blank");
});
$("#urlWindowOpenButton").click(function(){
var urlOpenText = $("#urlInput").val();
window.open(urlOpenText ,null, 'width=500, toolbar=yes , menubar=yes,scrollbars=yes');
});
});
ポイント
html：
(1)特になし
js：
(1)window.openはオプションの指定方法で新しいタブ、またはウィンドウを指定することが出来る
参考資料
JavaScript(仕事の現場でサッと使える！デザイン教科書) p102