Click here to Skip to main content
15,302,857 members
Articles / Desktop Programming / MFC
Posted 12 Jan 2002


91 bookmarked

Handling HTML Element Events in MFC applications - A simple alternative approach

Rate me:
Please Sign up or sign in to vote.
4.67/5 (15 votes)
12 Jan 20024 min read
Demonstration of a simple technique to intercept and handle, HTML element events generated in a hosted WebBrowser Control

Sample Image - dhtml.gif


The conventional approach to sink events when hosting a WebBrowser control involves using the MSHTML Element Events2 Interface. It requires retrieving a pointer to the element of interest of the page,  retrieving a pointer to the connection point container, finding the required connection point, advising the connection point to start receiving events, implementing IDispatch::Invoke to handle any fired event and closing the connections when no longer needed.

This article illustrates a simple alternative technique to intercept and handle, in a MFC application, HTML element events generated in a hosted WebBrowser Control. It also shows how to use xml objects to pack event information to the hosting application, and how to extract this information to implement an event handler.


Before navigation occurs in a WebBrowser control, a BeforeNavigate2 message is fired. VC++ 6.0 MFC Class Wizard, automatically adds the appropriate OnBeforeNavigate2 member function to handle this event.

Two of the six parameters taken by OnBeforeNavigate2, are useful to intercept DHTML events:

that contains the url address to be navigated to, and BOOL FAR* Cancel, that cancels navigation before it occurs.

In a WebBrowser's HTML page, the VBScript property location.href of the browser document's object, sets the entire URL as a string. When a given URL is set in the HTML script event handler, the corresponding string is passed as the second parameter of the member function OnBeforeNavigate2 of the hosting application.

In order to intercept and handle HTML element events, the href property should contain, instead of a regular URL address, a string with the necessary information of the DHTML event fired in the Browser control.

In most cases, the information required by the hosting application consists of the html element's id , and an associated value. This information is packed in a xml string having the form "<element idevent='001'>value</element>".

Once this value is passed to OnBeforeNavigate2, the parameter Cancel is set to TRUE to avoid navigation. The following two code snippets illustrate these ideas.

<SCRIPT ID = "clientEventHandlersVBS" LANGUAGE="VBScript">

dim strIndex

Sub myelement_onmouseover()
    strIndex = "007"
    strXML = "<element idevent='" & strIndex & "'>" &_<BR> myelement.innerText & "</element>"
    location.href = "Event:" & strXML
End Sub

// OnBeforeNavigate2 Event

handler void CDlgDHTMLEventsDlg::OnBeforeNavigate2(LPDISPATCH pDisp,
                                                   VARIANT FAR* URL,
                                                   VARIANT FAR* Flags,
                                                   VARIANT FAR* TargetFrameName,
                                                   VARIANT FAR* PostData,
                                                   VARIANT FAR* Headers,
                                                   BOOL FAR* Cancel) 
    CString strURL(URL->bstrVal);
    CString strXML(strURL.Right(strURL.GetLength()-6));
    strXML.Replace("%20", " ");

    if(strURL == _T("about:blank"))
        *Cancel = FALSE;
        *Cancel = TRUE;

The sample application

dlgDHTMLEvents is a dialog based MFC application. The dialog hosts a WebBrowser control that shows a HTML page having these DHTML objects: two INPUT elements, two BUTTONS, one <h1> text element and one IMAGE object. When some predetermined events are fired by each one of these elements, its id and associated value are passed to the MFC dialog app.

Since xml is used to convey DHTML event information, the Microsoft XML parser should be imported into the MFC project. To do it, add this line to StdAfx.h (If not installed, it can be downloaded from ):

#import "Msxml3.dll" named_guids raw_interfaces_only

To add ATL support (CComBSTR types are used), include this header file in StdAfx.h:

#include <atlbase.h> 

The HTML script is stored as a resource of the project (ID: IDR_HTML). The script's event handlers are included in the section <SCRIPT ID = "clientEventHandlersVBS" LANGUAGE="VBScript">of this resource.

The page is loaded into the Browser using the IPersistStreamInit interface and associated methods, of the CWebBrowser2 class. The member function LoadHTMLPage(CString strBaseAddress) implements this operation. The strBaseAddress parameter sets the baseline URL for the graphical resources used in the  HTML page.

The member variable m_strBaseAddress contains this parameter. In the sample application, this value is set, in the dialog constructor, to _T("c:\\dlgDHTMLEvents\\res"). Please modify according to your path.

Before a pointer to IPersistStreamInit can be obtained, Mshtml.dll has to be loaded (MSHTML is the IE rendering engine and parser for HTML). For this reason, the initial navigation of the browser is set to the valid  "about:blank" URL. LoadHTMLPage() is called from the event handler OnDocumentComplete(), provided m_bolLoaded is false.

The member function ExtractXMLInfo(CString strXML) converts the string parameter strXML, received from the Web browser control, to a valid xml MSXML2::IXMLDOMDocument* pxmlDoc object. To obtain a valid pointer to this interface, CoCreateInstance() is called as follows:

hr = CoCreateInstance( MSXML2::CLSID_DOMDocument, 

After obtaining this pointer, the parameter strXML, which has the form _T("<element idevent='001'>value</element>"), is loaded and navigated to obtain the attribute node

, and the value node MSXML2::IXMLDOMNode* pNode. The event id and its associated value, are passed as parameters to the event handler function EventHandler(INT nEvent, CString strValue). The static controls m_stcEvent and m_stcValue display in the dialog, the DHTML event description and the associated value.

In summary, the steps involved for intercepting and handling HTML events are:

  1. Declare any desired event handlers in the HTML script.
  2. In each event handler, set the location.href property to the xml string that contains the values to be passed to the MFC host application.     
  3. Call the function that loads the HTML document stream from the event handler OnDocumentComplete().
  4. Implement OnBeforeNavigate2().
  5. Extract HTML element event information from the received xml string.
  6. Use this information in the MFC event handler function.

With minor modifications, these steps can be used for applications that utilizes CHtmlView classes.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Leopoldo Peralta
Colombia Colombia
No Biography provided

Comments and Discussions

Generalgreate Pin
shaosjm18-Jan-10 3:19
Membershaosjm18-Jan-10 3:19 
QuestionFails CWebBrowser2: Create fails Pin
liameller41143-Mar-09 11:23
Memberliameller41143-Mar-09 11:23 
AnswerRe: Fails CWebBrowser2: Create fails Pin
chaitanyasingh8-Dec-10 23:53
Memberchaitanyasingh8-Dec-10 23:53 
GeneralRe: Fails CWebBrowser2: Create fails Pin
hugwind12-Apr-11 5:13
Memberhugwind12-Apr-11 5:13 
Questioncan update to ajax mode? Pin
nieoding3-Sep-08 23:32
Membernieoding3-Sep-08 23:32 
AnswerRe: can update to ajax mode? Pin
BadJerry9-Nov-10 8:38
MemberBadJerry9-Nov-10 8:38 
QuestionHow to get the html button event in win32 Pin
Member 462021615-May-08 1:16
MemberMember 462021615-May-08 1:16 
AnswerRe: How to get the html button event in win32 Pin
nieoding3-Sep-08 23:29
Membernieoding3-Sep-08 23:29 
QuestionEvent passing from bowser ctrl to MFC App using XML, XSL Pin
Sharad Goyal30-Oct-07 2:59
MemberSharad Goyal30-Oct-07 2:59 
Questionhow to know when the document completly loaded in browser helper object Pin
krishnamaneni21-Aug-07 6:23
Memberkrishnamaneni21-Aug-07 6:23 
Questionwhen I transfer this program into unicode, and display in the web browser ,there will be a useless line at the head of the picture, how should i deal with these situation? Pin
sude5-Nov-06 22:52
Membersude5-Nov-06 22:52 
Questionwhen I transfer this program into unicode, and display in the web browser ,there will be a useless line at the head of the picture, how should i deal with these situation? Pin
sude5-Nov-06 22:51
Membersude5-Nov-06 22:51 
Questionwhen I transfer this program into unicode, and display in the web browser ,there will be a useless line at the head of the picture, how should i deal with these situation? Pin
sude5-Nov-06 22:49
Membersude5-Nov-06 22:49 
GeneralExcellent!! But some errors about UNICODE and Resource.. Pin
PCC75130-Nov-04 21:19
MemberPCC75130-Nov-04 21:19 
GeneralNeed help!! Is there any way to find result code after CDHtmlDialog's Navigate method? ThanX Pin
dimak19-Apr-04 2:48
Memberdimak19-Apr-04 2:48 
QuestionHow to programmaticaly click the Drop-down list to expand the list Pin
KmAshif22-Dec-03 17:48
MemberKmAshif22-Dec-03 17:48 
Questionhow to navigate to html page from resources? Pin
george ivanov18-Dec-03 4:31
Membergeorge ivanov18-Dec-03 4:31 
AnswerRe: how to navigate to html page from resources? Pin
SMadden26-Apr-07 12:46
MemberSMadden26-Apr-07 12:46 
GeneralHelp needed in executing Javascript from a html page Pin
shivsun10-Oct-03 2:38
Membershivsun10-Oct-03 2:38 
General? for web browser control Pin
george ivanov18-Dec-03 4:33
Membergeorge ivanov18-Dec-03 4:33 
GeneralRe: Help needed in executing Javascript from a html page Pin
arrya_amit3-Feb-05 23:14
Memberarrya_amit3-Feb-05 23:14 
GeneralNeed help regarding parsing form input elements Pin
shivsun2-Jun-03 2:44
Membershivsun2-Jun-03 2:44 
Questionhow to programatically click a button or link? Pin
noil_sg12-Jan-03 21:28
Membernoil_sg12-Jan-03 21:28 
AnswerRe: how to programatically click a button or link? Pin
Leopoldo Peralta31-Jan-03 18:43
MemberLeopoldo Peralta31-Jan-03 18:43 
GeneralHelp plz????????? Pin
xxhimanshu5-Aug-03 23:01
Memberxxhimanshu5-Aug-03 23:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.