반응형
WebView2 설치하기
- (Visual Studio에서) 도구 메뉴 - NuGet 패키지 관리자 - 솔루션용 NuGet 패키지 관리
- 찾아보기 탭에서 'webview2' 검색
- Microsoft.Web.WebView2 선택
- 우측에서 웹뷰2를 추가할 프로젝트 선택
- 설치
- OK
- 설치 확인
- 설치됨 탭 클릭하여 설치되었는지 확인
WebView2, 폼에 추가하기
- 도구 상자에 WebView2를 폼으로 드래그하여 추가
- 프로그래밍 시 혼동을 줄이기 위해 편의상 이름을 'webView'로 변경
- 이 부분은 개인 취향일뿐, 꼭 변경하지 않아도 작동합니다.
WebView2에 특정 사이트 보여주기
첫번째 방법 : 디자인 창의 속성 이용
- 주로 초기 설정 시 사용
- 속성
- source : URL 입력
- 실행 화면
두번째 방법 : 코드 이용
- Navigate 메서드를 이용하여 특정 URL 주소를 웹 뷰에 표시
- 단, 프로그램 실행시 초기 설정으로 Navigate 메서드를 이용하면 에러 출력
// 입력한 URL 주소를 웹 뷰에 표시
webView.CoreWebView2.Navigate( URL );
프로그램 시작 시 초기 URL 주소 부여 방법
- 원인 파악 : 에러가 나는 이유는 웹뷰가 초기화 되기 전에 해당 URL 주소를 웹뷰에 입력하기 때문
- 해결 방법 : 웹뷰의 초기화가 끝나면 값을 넣어주도록 비동기 처리
// 폼1 실행 시 웹뷰 비동기로 초기화하기
public Form1()
{
InitializeComponent();
// 웹뷰 초기화 비동기 처리 메서드
ShowPage();
}
private async void ShowPage()
{
// CoreWebView2가 초기화될 때까지 대기
await webView.EnsureCoreWebView2Async();
// 초기화가 끝나면 해당 사이트로 이동
webView.CoreWebView2.Navigate("https://www.google.com");
}
- 실행 화면
주소를 입력하여 해당 주소로 이동하기
폼 디자인
- 디자인 창에 두 개의 컨트롤러 추가
- 텍스트박스 : 사용자에게 주소를 입력 받는 기능
- TextBox name : tbUrl
- 버튼 : 텍스트박스에서 입력한 주소로 이동하게 하는 기능
- Button name : btnMoveUrl
- 텍스트박스 : 사용자에게 주소를 입력 받는 기능
코드
private void btnMoveUrl_Click(object sender, EventArgs e)
{
if (webView != null && webView.CoreWebView2 != null)
{
// 입력받은 주소로 이동
webView.CoreWebView2.Navigate(tbUrl.Text);
}
}
코드 설명
- webView 존재 여부 확인
- webView != null && webView.CoreWebView2 != null
- 특정 URL 주소로 이동 : Navigate
- webview.CoreWebView2.Navigate(주소)
- 단, 반드시 "http://" 나 "https://" 로 시작하지 않으면 에러 출력
실행 화면
- 티스토리 사이트 입력 후 이동 버튼 클릭
반응형
프로그램 창 크기에 따라 반응형으로 크기 조절하기
- 아래의 이벤트 핸들러와 컨트롤러의 이름은 임의로 설정한 이름입니다.
코드
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// 프로그램의 크기 변경에 따라 크기 자동 맞춤
this.Resize += new System.EventHandler(this.Form_Resize);
}
private void Form_Resize(object sender, EventArgs e)
{
// 웹뷰의 크기 설정
webView.Size = this.ClientSize - new System.Drawing.Size(webView.Location);
/*
btnMoveUrl : 입력된 URL 이동 버튼
tbUrl : URL을 입력할 텍스트박스
*/
btnMoveUrl.Left = this.ClientSize.Width - btnMoveUrl.Width;
tbUrl.Width = btnMoveUrl.Left - tbUrl.Left;
}
}코드 설명
- 이벤트 핸들러 등록 : Form_Resize
- 이벤트 : 폼의 크기가 변경될 때마다 폼 안에 속한 컨트롤러의 크기와 위치 조정
- webView (WebView2 컨트롤)
- 폼의 크기에서 webView의 위치를 뺀 값으로 설정
- btnMoveUrl (URL 이동 버튼)
- 폼의 가장 오른쪽에 위치하도록 버튼의 크기를 이용하여 계산
- tbUrl (URL 입력 텍스트박스)
- 버튼 위치에서 입력 텍스트 박스를 뺀 값으로 설정
- 즉, 모든 컨트롤러가 크기에 맞게 반응형으로 조절되게 설정
- webView (WebView2 컨트롤)
실행 화면
- 프로그램 크기를 작게 변경
- 프로그램 크기를 크게 변경
웹뷰에 자바스크립트 삽입하기
구문
- ExecuteScriptAync : 입력한 자바스크립트를 웹뷰에서 실행
// 입력한 자바스크립트 실행
webView.CoreWebView2.ExecuteScriptAsync($" Input JavaScript Code ");코드
private void btnMoveUrl_Click(object sender, EventArgs e)
{
// 웹뷰가 존재할 경우 아래의 코드 실행
if (webView != null && webView.CoreWebView2 != null)
{
// 웹뷰에 입력한 URL 표시
webView.CoreWebView2.Navigate(tbUrl.Text);
// 웹뷰에 자바스크립트 삽입
webView.CoreWebView2.ExecuteScriptAsync($"alert('{tbUrl.Text} 사이트로 이동하였습니다.')");
}
}코드 설명
- 버튼을 클릭 할 경우
- 클릭 리스너 수행(btnMoveUrl_Click)
- 웹뷰가 존재할 경우
- webView != null && webView.CoreWebView2 != null
- 웹뷰에 자바스크립트(alert) 실행
- webView.CoreWebView2.ExecuteScriptAsync($"alert('{tbUrl.Text} 사이트로 이동하였습니다.')");
실행 화면
- 네이버 주소를 입력 시, alert로 해당 사이트 이동 정보 보여주기
참고
Microsoft - Edge - Get started with WebView2 in WinForms apps
반응형