【jquery,js】指定したURLを開く [window.open,location.href] [js14_20210322]

5586 ワード
JavaScript jQuery JavaScript テキストリンク

処理の概要

処理のフロー：

　(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