C# WebView21 Alert 창 직접 핸들링 하는 방법

C# WebView21 Alert 창 직접 핸들링 하는 방법을 알아 볼게요

 

Edge WebView21

 

기본적으로 WebView2는 JavaScript alert(), confirm(), prompt(), beforeunload 등의 다이얼로그를 브라우저의 기본 UI로 표시합니다. 하지만 이 기본 동작을 끄고, 해당 다이얼로그가 표시될 때 발생하는 이벤트를 가로채서 C# 코드에서 사용자 정의 UI를 띄울 수 있습니다.

 

alert() 창을 오버라이드하는 방법

1. 기본 스크립트 다이얼로그 비활성화: 먼저 WebView2의 설정에서 기본 JavaScript 다이얼로그가 표시되지 않도록 설정해야 합니다.이 설정을 false로 지정하면, JavaScript alert(), confirm(), prompt() 함수가 호출될 때 기본 다이얼로그가 나타나지 않게 됩니다.
2.  

   webView21.CoreWebView2.Settings.AreDefaultScriptDialogsEnabled = false;
   

3. C#
    
4. ScriptDialogOpening 이벤트 핸들러 추가: 이제 ScriptDialogOpening 이벤트에 이벤트 핸들러를 추가하여 JavaScript 다이얼로그가 호출될 때 C# 코드가 이를 처리하도록 합니다.
5. C#

    

   webView21.CoreWebView2.ScriptDialogOpening += CoreWebView2_ScriptDialogOpening;
   

6. 이벤트 핸들러 구현: CoreWebView2_ScriptDialogOpening 이벤트 핸들러 내에서 CoreWebView2ScriptDialogOpeningEventArgs 객체를 통해 어떤 종류의 다이얼로그가 호출되었는지 (e.Kind) 확인하고, 메시지를 가져올 수 있습니다 (e.Message). alert 다이얼로그의 경우 CoreWebView2ScriptDialogKind.Alert를 사용하여 감지하고, 원하는 사용자 정의 메시지 박스를 띄우면 됩니다.

 

private async void CoreWebView2_ScriptDialogOpening(object sender, CoreWebView2ScriptDialogOpeningEventArgs e)
{
    // deferral 객체를 사용하여 비동기 작업을 처리합니다.
    // 이것을 사용하지 않으면, 웹뷰가 C# 코드의 완료를 기다리지 않고 바로 진행될 수 있습니다.
    using var deferral = e.GetDeferral();

    // 어떤 종류의 스크립트 다이얼로그인지 확인합니다.
    if (e.Kind == CoreWebView2ScriptDialogKind.Alert)
    {
        // JavaScript alert 메시지를 가져옵니다.
        string alertMessage = e.Message;

        // 여기서 C# UI (예: MessageBox)를 사용하여 사용자 정의 alert 창을 띄웁니다.
        MessageBox.Show(alertMessage, "웹페이지 알림", MessageBoxButtons.OK, MessageBoxIcon.Information);

        // alert 다이얼로그의 경우, 단순히 사용자에게 메시지를 보여주는 것이 목적이므로,
        // e.Accept()를 호출하여 웹뷰에게 처리가 완료되었음을 알립니다.
        // (confirm, prompt의 경우 Accept() 호출 여부에 따라 반환값이 달라집니다)
        e.Accept();
    }
    else if (e.Kind == CoreWebView2ScriptDialogKind.Confirm)
    {
        string confirmMessage = e.Message;
        DialogResult result = MessageBox.Show(confirmMessage, "웹페이지 확인", MessageBoxButtons.YesNo, MessageBoxIcon.Question);

        if (result == DialogResult.Yes)
        {
            e.Accept(); // "확인" 또는 "Yes" 클릭
        }
        // else { e.Accept()를 호출하지 않으면 "취소" 또는 "No"로 처리됩니다. }
    }
    else if (e.Kind == CoreWebView2ScriptDialogKind.Prompt)
    {
        string promptMessage = e.Message;
        string defaultValue = e.DefaultText; // prompt의 기본값

        // 사용자 정의 입력 다이얼로그를 띄우고, 사용자 입력을 받아 ResultText에 할당합니다.
        // (예: CustomInputDialogForm.ShowDialog()와 같은 별도의 폼 사용)
        // 여기서는 간단히 MessageBox로 예시합니다. 실제로는 사용자 입력 폼을 사용해야 합니다.
        // 아래 코드는 prompt의 동작을 완벽히 모방하지 않습니다.
        string userInput = Microsoft.VisualBasic.Interaction.InputBox(promptMessage, "웹페이지 입력", defaultValue);

        if (userInput != null) // 사용자가 취소하지 않은 경우
        {
            e.ResultText = userInput;
            e.Accept();
        }
        // else { e.Accept()를 호출하지 않으면 null이 반환됩니다. }
    }
    // beforeunload 처리도 가능합니다.
    else if (e.Kind == CoreWebView2ScriptDialogKind.Beforeunload)
    {
        string beforeUnloadMessage = e.Message;
        DialogResult result = MessageBox.Show(beforeUnloadMessage, "페이지 떠나기", MessageBoxButtons.YesNo, MessageBoxIcon.Warning);

        if (result == DialogResult.Yes)
        {
            e.Accept(); // 페이지 떠나는 것을 허용
        }
        // else { e.Accept()를 호출하지 않으면 페이지에 머무르게 됩니다. }
    }

    // Deferral 객체 사용을 완료합니다.
    deferral.Complete();
}

 

 

주의사항

• 비동기 처리: ScriptDialogOpening 이벤트 핸들러는 비동기적으로 처리될 수 있습니다. e.GetDeferral()을 사용하여 Deferral 객체를 가져오고, 비동기 작업이 완료된 후 deferral.Complete()를 호출해야 웹뷰가 다음 작업을 진행할 수 있습니다. 그렇지 않으면 웹페이지가 멈추거나 예상치 못한 동작을 할 수 있습니다.
• prompt() 처리: prompt()의 경우 사용자로부터 입력을 받아야 하므로, 단순히 MessageBox.Show()로는 사용자 입력을 받기 어렵습니다. 별도의 입력 폼(예: Form 또는 UserControl)을 만들어 사용자 입력을 처리해야 합니다.
• confirm() 처리: confirm()은 true/false를 반환하므로, e.Accept() 호출 여부에 따라 웹뷰에 반환되는 값이 달라집니다. e.Accept()를 호출하면 true로, 호출하지 않으면 false로 처리됩니다.

이 방법을 통해 WebView2에서 JavaScript의 alert()을 포함한 기본 다이얼로그를 제어하고, 애플리케이션의 UI/UX 가이드라인에 맞게 커스터마이징할 수 있습니다.