C# ChromiumWebBrowser에서 JavaScript 함수 호출과 웹에서 C# 메소드 호출하는 방법

C# 윈폼에는 기본 웹브라우저 컨트롤이 있지만 스크립트 오류가 빈번해서 프로젝트의 닷넷프레임워크 버전을 4.6 이상으로 구성할 수 있다면 크로미움웹브라우저를 사용하는 것이 매우매우 좋다.

앞서 ChromiumWebBrowser를 사용하려면 NuGet 패키지 관리에서 cefsharp를 검색한 다음 CefSharp.WinForms를 설치하면 된다.

 

설치가 끝나면 도구상자에 CefSharp이 자동으로 추가가 되었을 경우 도구상자에서 ChromiumWebBrowser 컨트롤을 폼 디자인에 드래그앤 드랍해서 사용한다.

 

도구상자에 자동으로 추가가 되지 않았다면 다음과 같이 코드로 폼에 크로미움웹브라우저 컨트롤을 추가한다.

public Form1()
{
    InitializeComponent();
    InitializeChromium();
}

private void InitializeChromium()
{
    if (!Cef.IsInitialized) // Check before init
    {
        CefSettings settings = new CefSettings();
        Cef.Initialize(settings);
    }
    ChromiumWebBrowser chrome = new ChromiumWebBrowser("웹주소");
    chrome.Dock = DockStyle.Fill;
    this.Controls.Add(chrome);    
}

 

c#에서의 크로미움 사전 준비는 끝났다.

본격적으로 c#에서 웹 사이트에 있는 Javascript 함수를 호출하는 방법과 웹에서 작업된 결과를 c#에서 알 수 있도록 웹에서 c#의 메소드를 호출하는 방법을 설명하겠다.

1. C#에서 웹에 있는 Javascript 함수를 호출하는 방법

C# 소스에서 javascript 함수를 호출해야 하는 이벤트에 다음과 같은 코드를 입력한다.

string callJS = string.Format("show({0});", data);
chromiumWebBrowser.GetBrowser().MainFrame.ExecuteJavaScriptAsync(callJS);

 

 

2. 웹에서 C# 메소드를 호출하는 방법

먼저 웹에서 호출해야 할 메소드가 들어있는 클래스를 하나 생성한다.

이때 메소드명의 첫글자는 무조건 소문자여야 한다. 

실제 사용하는 곳에서 c#에서는 첫글자가 대문자인데, javacript에서는 소문자로 호출되는 함수가 하나 있는데 잘 되는 것으로 봐서는 대소문자 상관없이 되는 것 같다.

public class BoundObject
{
    Form1 form;

    public BoundObject(Form _form)
    {
        form = _form;           
    }

    public void callForm(object message)
    {
    	form.CallForm(message);
    }
    
    public void closeForm()
    {
        form.CloseForm();
    }
}

 

그 다음 앞서 설명한 InitializeChromium()에 다음과 같이 추가로 입력한다.

private void InitializeChromium()
{
    if (!Cef.IsInitialized) // Check before init
    {
        CefSettings settings = new CefSettings();
        Cef.Initialize(settings);
    }
    ChromiumWebBrowser chrome = new ChromiumWebBrowser("웹주소");
    chrome.Dock = DockStyle.Fill;
    this.Controls.Add(chrome);    
    
    chrome.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;
    chrome.JavascriptObjectRepository.Register("bound", new BoundObject(this.Name, this), false, BindingOptions.DefaultBinder);
}

 

참고로 chrome.JavascriptObjectRepository.Register에서 "bound"는 BoundObject 클래스를 웹에서 호출하는 이름이 되는 것이므로 다른 이름으로 입력해도 무방하다.

 

웹에서 c# 메소드를 호출해야 하는 곳에 각각 다음과 같이 입력한다.

bound.callForm('데이터');

bound.closeForm();

 

이는 C#의 BoundObject에 있는 각각의 메소드가 호출되는 것이므로

앞서 작성한 BoundObject 클래스에 있는 callForm과 closeForm은 Form1에 있는 CallForm 메소드와 CloseForm 메소드를 호출하게 된다.

 

참고로 예제코드는 Form1에 있는 CallForm 메소드와 CloseForm 메소드가 다음과 같이 사용 된다.

public void CallForm(object message)
{
    this.Tag = message;
    DialogResult = DialogResult.OK;
}

public void CloseForm()
{
    DialogResult = DialogResult.Close;
}

 

 

2022.08.03 - [C#/WinForm] - WebBrowser 자바스크립트에서 C# 메소드를 호출하는 방법