How to detect click on `` element contained in a WebView control on Visual Studio 2019?

问题

I want to use .Net WebView control in a WinForm to display Unicode characters greater than 0xFFFF.

I have created following prototyp VB.Net program to load an HTML page containing Javascript and CSS Style.

Dim sText As XElement =
<html>
    <head>
        <style type="text/css">
            .unicode
                {
                font-size: 32px;
                cursor: pointer;
                }
        </style>
    </head>
    <body>
        <script type='text/javascript'>
            function clickUnicode()
                {
                var sValue = this.event.srcElement.innerText
                alert('Click on Unicode character:' + sValue);
                }  
        </script>
        <span class="unicode" onclick="clickUnicode()">&#x1F600;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F601;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F602;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F603;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F604;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F605;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F606;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F607;</span>
    </body>
</html>

wv.Settings.IsScriptNotifyAllowed = True
wv.Settings.IsJavaScriptEnabled = True
wv.NavigateToString(sText.ToString())

When a load my Form, I can see following output

When I test this HTML code on Chrome, an AlertBox is displayed on screen when I click an emoticon character.

When I test it using WebView, I see nothing !

Is Javascript code executed ?

What must I do to notify VB.Program that an Unicode character has been clicked ?

回答1:

I have continued to search and I have found a solution.

My last problem is that alert() Javascript function doesn't work with WebView ! When I tested HTML code using Chrome, that is working.

So, to be sure that my Javascript code is executed, I have added a <div> with some text that become red when Javascript event function is executed.

I'm now sure that Javascript function is called !

The VB.Net code that is working is following

    Private Sub Form_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Dim sText As XElement =
<html>
    <head>
        <style type="text/css">
            .unicode
                {
                font-size: 32px;
                cursor: pointer;
                }
        </style>
        <script>
            function clickUnicode()
                {
                var eDiv = document.getElementById("divid");
                eDiv.style.color = "Red";
                var sValue = this.event.srcElement.innerText;
                //alert('Click Unicode character:' + sValue);
                window.external.notify(sValue);
                }  
        </script>
    </head>
    <body>
        <div id="divid">StackOverflow is great</div>
        <span class="unicode" onclick="clickUnicode()">&#x1F600;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F601;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F602;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F603;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F604;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F605;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F606;</span>
        <span class="unicode" onclick="clickUnicode()">&#x1F607;</span>
    </body>
</html>
        wv.Settings.IsScriptNotifyAllowed = True
        wv.Settings.IsJavaScriptEnabled = True
        wv.IsJavaScriptEnabled = True
        wv.NavigateToString(sText.ToString())
    End Sub

The Javascript function window.external.notify(sValue) is intercepted by ScriptNotify event.

So, I have added following VB.Net code

Private Sub wv_ScriptNotify(sender As Object, e As WebViewControlScriptNotifyEventArgs) 
Handles wv.ScriptNotify
    Debug.Print("Unicode character " & e.Value & " has been clicked in WebView")
End Sub

When I execute this little program and I click on last unicode, I can see following lines in Visual Studio 2019 Debug Window.

The clicked unicode is displayed without color but this is normal.

来源：https://stackoverflow.com/questions/61326566/how-to-detect-click-on-div-element-contained-in-a-webview-control-on-visual

标签

javascript