Web [jQuery] 웹페이지 자동 클릭 만드는 방법. (How to make webpage auto clicks.)
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 엔지엠 에디터로 웹 자동화 RPA를 만들기는 간단하지만, 직접 내부 시스템에 매크로성 기능을 탑재할수도 있습니다. 물론, 비즈니즈 로직에 맞게 동작하도록 구현 해야겠지만요~ 아무튼, 간단하게 특정 이벤트에 마우스 클릭이 발생하도록 하는 방법에 대해 알아보도록 하겠습니다. 웹에 대한 이해가 있으신분들은 약간 지루할수도 있겠네요^^; 아래와 같은 코드를 추가 해줍니다.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"
></script>
</head>
<body>
<script>
$(document).ready(function () {
alert("TEST");
});
</script>
</body>
</html>
F5를 눌러서 실행하면 "TEST" 메시지창이 표시됩니다.
jQuery를 CDN(Content Delivery Network)으로 추가 해놨는데요. jQuery js 파일을 다운로드해서 추가해도 됩니다. 이제 클릭을 자동으로 발생시키기 위해 코드를 수정합니다.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"
></script>
</head>
<body>
<a id="ngm" href="http://ngmsoftware.com" target="_blank">엔지엠소프트웨어</a>
<script>
$(document).ready(function () {
$('#ngm')[0].click();
});
</script>
</body>
</html>
클릭 이벤트를 보면 아이디 셀렉터로 가져온 요소(Element)에서 인덱스를 줘야 동작합니다. 어떤 이유인지는 모르겠지만... 그렇더군요^^; 옛날 방식으로 처리하려면 아래와 같이 코드를 변경하고 다시 실행 해보세요.
<html>
<body>
<a id="ngm" href="http://ngmsoftware.com" target="_blank">엔지엠소프트웨어</a>
<script>
window.onload = function() {
document.getElementById('ngm').click();
};
</script>
</body>
</html>
사실 이 내용의 핵심은 jQuery에서 동적으로 클릭 이벤트를 발생시키는 방법인데요. 브라우저 또는 버전에 따라 다르긴하지만, 셀렉터로 선택한 요소의 인덱스 0에만 클릭 이벤트가 발생한다는 것입니다. 이외에도 크롬, 안드로이드나 사파리등등... 모바일 환경에서는 또 다른 방식을 사용해야 하는데요. 모바일 웹앱을 개발할 때 클릭 이벤트는 주의해서 사용해야 합니다. 아래 코드는 완성된 내용입니다. 3번 반복하면서 링크를 클릭하게 됩니다.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"
></script>
</head>
<body>
<a id="ngm" href="http://ngmsoftware.com" target="_blank">엔지엠소프트웨어</a>
<script>
$(document).ready(function () {
for (var i = 0; i < 3; i++) {
$("#ngm")[0].click();
sleep(5000);
}
});
function sleep(num) {
var now = new Date();
var stop = now.getTime() + num;
while (true) {
now = new Date();
if (now.getTime() > stop) return;
}
}
</script>
</body>
</html>
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
- 이전글C#으로 매크로 플레이어 만들기. (Creating a macro player in C#.) 21.06.17
- 다음글[오라클 문제] 다음중 문자열을 처리하는 명령이 아닌것을 모두 고르시오. 21.06.16
댓글목록
등록된 댓글이 없습니다.