処理の概要

処理のフロー：

　(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