【jquery,js】지정한 URL 열기 [window.open,location.href] [js14_20210322]

처리 개요



처리 흐름:

 (1) 텍스트 박스의 URL을 취득한다
 (2)지정의 방법으로 URL에 액세스 한다
※전이 할 수 없는 경우는, 디폴트로 서버 에러가 된다

화면 이미지



이미지 1


보충) 각각 지정의 버튼을 누르면 텍스트 박스내의 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

좋은 웹페이지 즐겨찾기