Handling custom Javascript events in WebBrowser Control C#

Question

I'm attempting to handle what seems to be custom js events. I have a table that updates through an AJAX request, and is contained within an frame inside an iframe. I have to detect when this table fills with data.

When I examine the table in firebug, it shows that an event called overflow runs. But I can't find anything about it anywhere so I assume it's custom or just not supported, at least not by the WebBrowser control I'm using.

This javascript code will detect it:

(function(){
    function log( e ) {
        console.log( e );
    }
    window.frames[0].frames[1].document.body.addEventListener( "overflow", log );    
})();

However, I'd like to avoid using a js to C# call unless absolutely necessary, how can I handle the overflow js event in C# with Web Browser?

When you say "catch the overflow event" what exactly do you mean? — Will P., Feb 19 '14 at 16:55
I meant to say, handle the event (edited my question). So I need to click a link in the table once it is populated. — Darth_Evil, Feb 19 '14 at 17:14
I'm still not sure what you mean, does the `log` function not handle the event? — Will P., Feb 19 '14 at 17:16
In firebug, the javascript code I posted will work, and will handle the event. I need to implement this in the WebBrowser control. So far I've attached an event handler to the body of the frame I'm working in to listen for overflow, but it doesn't work. — Darth_Evil, Feb 19 '14 at 17:19
You cannot catch this "web browser event" using C# code. The C# code is running on the server and the web browser event is happening remotely on the client side. If you are used to the code-behind event catching, it did actually three things: 1. catch event in javascript; 2. send the current states,including the event, to server; 3 server handles event; 4 send new states back to browser, this will cause a refresh/reload. — Wei Ma, Feb 19 '14 at 17:24
Try it first in full IE browser, see if this event is fired there. — noseratio, Feb 19 '14 at 22:19

score 0 · Answer 1 · edited May 23 '17 at 11:44

Update Jun/11/2015: Please view the correct answer below

You can look at this: Web browser control: How to capture document events?

But that shows the use of a COM add-in. However, as of .net 4.5, this can be done plain-out-of-the-box.

Say this is a small html page:

<html>
    <head>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script>
            $(function() {
                $('input').click(function(){
                    alert("hello");
                    $(document).trigger("foo");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="Trigger"/>
    </body>
</html>

This page will trigger a custom event on the document. I am hosting this page using a python web server @ localhost:4542. (That is not shown here). You have to wait for the html document to load, and post that, attach the event handler.

using System;
using System.Windows.Forms;

namespace winformWebBrowser
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            webBrowser1.Navigate("http://localhost:4542");
            webBrowser1.DocumentCompleted += webBrowser1_DocumentCompleted;
        }

        void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            webBrowser1.Document.AttachEventHandler("foo", new EventHandler(delegate(object s, EventArgs k)
            {
                MessageBox.Show("foo");

            }));
        }
    }
}

But what if you want to custom data exposed on the event...? As of now, I don't have an answer for that part...but you can devise many ways to achieve this. Like for e.g., put all necessary data in a hidden field somewhere on the html document...and query that out from c# code

Update Jun/11/2015: I sort of remember that the code worked the first time I tried it. However, on subsequent testing it failed everytime. It seems you can only handle pure DOM events - like click, mouseover, mousemove, etc. Hence your final approach to write code around this limitation.

It doesnt work. ; *It seems you can only handle pure DOM events* So, your answer is not applicable.. Instead of writing 'please look at the correct answer below' - you should open with 'this once worked but is no longer possible'... — mschr, Jul 31 '16 at 00:53
@mschr the correct answer is that you can only hook dom events. — deostroll, Aug 01 '16 at 07:58

Handling custom Javascript events in WebBrowser Control C#

1 Answers1