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:
<!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