Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more: , +
Since I am not getting anywhere with my problem, I was hoping someone here might have knowledge on this subject.

I am working on a view in a huge, mature MFC application in Visual Studio 2010. This view hosts a browser control through a CDHtmlDialog[^] derived class. Within the browser page, we are using D3.js to render and display SVG graphics from data we retrieve from our web server. The data set and the rendered SVG is rather large (the SVG (XML) string is over 1,000,000 characters) and I need to send a notification to my browser control when the SVG has been rendered. We get the data from the web server and do the D3 processing from within the jQuery $(document).ready() function.

My problem is that I am struggling to programmatically trigger an event from within the web page and receive it in the browser control. I can get all the normal user initiated events just fine - click, mouseover, focus, etc., but only when I manually perform the action, not when I rig up a JavaScript function to simulate a click or some other action.
The only thing I have been able to use reliably, is the OnCopy (to clipboard) event, but I would really prefer not to mess around with the clipboard for this (especially since the view uses Word Automation to create/update documents).

As a basic starting point, I have been using the MS sample DHTMLExplore[^] for running tests before I move the code into our application.
[HINT: If you want to try something like that, make sure you have <!DOCTYPE html> and/or <meta http-equiv="X-UA-Compatible" content="IE=9"> in your document or the SVG will not render. Depending on which OS you are using, you might also have to take to the registry to get the browser control to behave correctly. Check out this on SO[^], this on MSDN[^] and check your settings by connecting to this[^]]


For simple tests, I am using the HTML below:
XML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
    function CopySvgImage(elementId) {
        if (document.body.createControlRange) {
            var controlRange = document.body.createControlRange();
            controlRange.add(document.all(elementId));
            controlRange.execCommand('Copy');
        }
    }

    function SignalImageReady(elementId) {
        if (document.createEvent) {
            var imageElement = document.getElementById(elementId);
            var readyEvent = document.createEvent('MouseEvents');

            readyEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 1, false, false, false, false, 0, null);
            imageElement.dispatchEvent(readyEvent);
        }
    }
</script>
</head>
<body>
<img src="folder.gif" id="folder_image" onclick="CopySvgImage('circle_image')" />
<svg class="svgimage" id="circle_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>

<button type="button" onclick="CopySvgImage('circle_image')">Copy Image</button>
<button type="button" onclick="SignalImageReady('folder_image')">Signal Ready</button>

</body>
</html>

[Note: folder.gif is embedded as a resource in the MSDN sample]
In this case I have an event sink set up in the browser control code to receive OnClick events for the folder image. I receive that event when I manually click on the image, but not when I click on the "Signal Ready" button, which simulates a click on the image. In both cases, I can see the 'circle_image' being copied to the clipboard, so I know my simulated click event works and triggers the copy functionality in the HTML page.

In the code above I am using dispatchEvent(), but I have also tried using jQuery's trigger() and triggerHandler() as well as:
- Triggering several different event types (click, focus, blur, activate, scroll, propertychanged, dataavailable, etc.).
- Triggering events on several different HTML element types (span, div, img, svg, td, etc.).
- Having an event sink to the onload event for the <svg> element.
- Having an event sink for the onpropertychanged event and then changing the .innerHTML and .style.color of an element.

This is one of those cases where there are a lot of different things and combinations to try out and it is quite a daunting task, so if you know of something that you are sure will work, I would love to hear about it.

On my system, I am running IE10 on Windows 7 (64 bit), but we need to maintain compatibility with IE9.
Google is my friend and I have been asking and looking for answers already, so no need to suggest I do that. The few articles about CDHtmlDialog here on CodeProject have not given me the answer either. It simply seems like there are not a lot of people doing advanced stuff with browser controls hosted in applications.

Soren Madsen
Posted
Updated 2-Dec-13 14:01pm
v4
Comments
chaau 2-Dec-13 18:39pm    
What about fireEvent()? http://msdn.microsoft.com/en-us/library/ie/ms536423%28v=vs.85%29.aspx
SoMad 2-Dec-13 18:50pm    
Thanks, but that is deprecated and replaced with dispatchEvent() (starting with IE9, I believe). I tried it out just now, but I got a script error.

Soren Madsen
chaau 2-Dec-13 19:01pm    
Just wondering if you already played with Internet Options of your Internet Explorer. One setting is particular: "allow scripting of microsoft webbrowser control" under Security->Custom level->Settings. You need to figure out though what zone your DHTml content falls into
SoMad 2-Dec-13 19:18pm    
This seemed like a promising tip, but it was already enabled for my Local Intranet zone and enabling it for the Internet zone did not change the behavior. Thanks anyway.
I had only glanced over those settings because there are so many and it is difficult to guess what might work.

Soren Madsen

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900