เมธอด moveTo() ของออบเจกต์ Window ใน HTML ใช้สำหรับย้ายขอบซ้ายและขอบบนของหน้าต่างไปยังพิกัดที่ระบุอย่างชัดเจน
ไวยากรณ์ (Syntax)
window.moveTo(x, y)พารามิเตอร์:
- x - จำนวนพิกเซลในการย้ายแนวนอน (แนวแกน X)
- y - จำนวนพิกเซลในการย้ายแนวตั้ง (แนวแกน Y)
ตัวอย่างการใช้งาน
ตัวอย่างต่อไปนี้สาธิตการเปิดหน้าต่างใหม่และย้ายไปยังตำแหน่ง (550, 250)
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>สาธิตเมธอด moveTo() ของ Window ใน HTML</h1>
<button onclick="create()" class="btn">สร้างหน้าต่างใหม่และย้ายตำแหน่ง</button>
<script>
function create() {
var newWindow = window.open('', '', 'width=150,height=150');
newWindow.moveTo(550, 250);
}
</script>
</body>
</html>ผลลัพธ์
คลิกปุ่ม "สร้างหน้าต่างใหม่และย้ายตำแหน่ง" เพื่อสร้างหน้าต่างใหม่และย้ายไปยังพิกัด (550, 250) โดยใช้เมธอด moveTo()
หมายเหตุสำคัญ
- เมธอดนี้ทำงานได้เฉพาะกับหน้าต่างที่เปิดด้วย
window.open()เท่านั้น - เบราว์เซอร์สมัยใหม่อาจบล็อกหรือจำกัดการใช้งานเมธอดนี้เพื่อความปลอดภัย
- พิกัด (0,0) คือมุมซ้ายบนของหน้าจอ
