웹 프로그래밍 기초/BOM 브라우저 객체

moveTo(), moveBy()

별초롱언니 2025. 4. 10. 16:22

window를 동적으로 이동할  수 있는데 moveTo()는 절대 위치에 의해 이동하는 것이고

moveBy()는 상대적인 값에 의해 이동하는 것이다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>window객체_moveTo()</title>
</head>
<body>
  <p>move the new window</p>
  <button onclick="openWin()">open</button>
  <button onclick="moveWin()">move</button>

  <script>
    let myWindow;
    function openWin() {
      myWindow = window.open("","myWindow","width=200px,height=300px");
      myWindow.document.write("<p>This is myWindow</p>")
    }

    function moveWin() {
      myWindow.moveTo(500,100);
      myWindow.focus();
    }
  </script>
</body>
</html>

open 버튼 클릭했을때 지정한 사이즈로새창열림

그 후에 move 클릭하면 해당  값만큼 창 이동 !