티스토리 뷰
electron - webview 이용하기
0. Webview 란 무엇인가?
- 간단히 생각하면 iframe 과 비슷하다.
- html 읽어오고, js, css 주입할수 있고..... 여러 가지로 응용 가능하다.
- 특정 페이지 접근시 자동로그인을 한다던가....
- 주문 결재를 1초만에 한다던가.....
- 옐로아이디 메시지를 전송한다던가......
- 웹으로 하는건 안되는게 없겠다......
1. webview 에 JS 실행하기.
- 테스트로 티몬 로그인을 만들어 보도록하자.
- docs : http://electron.atom.io/docs/api/web-view-tag/
- 사용할 Method
- executeJavaScript : 스크립트 실행하기.
- loadURL : 페이지 열기.
- getURL : webview 페이지 주소 가져오기.
- 준비하기
- 일단 스타터팩 까지는 설치한다.
- https://github.com/electron/electron-quick-start
- 티몬 페이지 분석
- 로그인 페이지 접근
- 로그인이 안되어있다면 아래 페이지가 뜬다.
https://login.ticketmonster.co.kr/user/loginform?return_url=http%3A%2F%2Fwww.ticketmonster.co.kr%2Fhome
- 로그인이 되어있다면 아래페이지가 뜬다.
https://login.ticketmonster.co.kr/user/buyInfo
- 제이쿼리를 이용한 로그인
var ID = "XXXXXXXX";
var PW = "XXXXXXXXXXXXXX";
$("#userid").val(ID);
$("#pwd").val(PW);
fn_submit2();
- index.html 수정
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
webview {
display: inline-flex;
width: 100%;
height: 100%;
}
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
background-color: #202020;
}
</style>
</head>
<div class="titlebar"> </div>
<div id="pdf-path"></div>
<webview id="webview" src="http://www.naver.com" autosize="on" useragent="Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"></webview>
<script>
onload = () => {
const webview = document.getElementById('webview');
var runKakao = function() {
setTimeout(function() {
webview.loadURL("https://login.ticketmonster.co.kr/user/loginform?return_url=http%3A%2F%2Fwww.ticketmonster.co.kr%2Fhome", {
userAgent: "Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
});
setTimeout(function() {
if (webview.getURL() !== "https://login.ticketmonster.co.kr/user/buyInfo") {
webview.executeJavaScript('$("#userid").val("XXXXXXXXX");');
webview.executeJavaScript('$("#pwd").val("XXXXX");');
webview.executeJavaScript('fn_submit2();');
console.log("LOGIN");
} else {
console.log("LOGIN");
}
}, 1000 * 5);
}, 1000 * 3);
};
runKakao();
};
</script>
- 실행
- npm start
2. 마무리
- electron webview 이용하면 웹으로 하는 수많은 반복작업을 대신 해줄것이다.
- 하지만 이건 빙산의 일각일 뿐이다.....
- 일렉트론의 기능중 1개일 뿐이다.
- Total
- Today
- Yesterday
- 2factor
- real
- ElasticSearch
- electron-updater
- 브라우저봇
- Restore
- 자동업데이트
- 엘라스틱서치 백업
- Redis
- 네이트온
- puppeteer
- MariaDB Galera
- AmazonMQ
- AWS
- 마리아
- 팀룸
- activemq
- mqtt
- elasticsearch mapping
- 오픈API
- 엘라스틱서치 복구
- auto update
- 봇
- elasticsearch mapping change
- maria
- 브라우저 제어
- bitbucket
- electron
- 2FA
- backup
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |