Highlighting the Elements in Web Browser Control and Getting the HTML XML Path of the Element Clicked

• Download source - 148 KB

Introduction

This is a small tip regarding highlighting items and getting the element XML path that is clicked in the Web Browser control. I had this query of how to highlight the elements more like the way when we use the debugger (Ref Dia1). I thought I could share how this can be implemented in the control.

This tip focuses on the following things:

1. Highlighting the elements during the mouse movement
2. Getting the HTML XML path of the element that is clicked
3. Forward and Backward functionality in Web Browser

Background

References needed:

• Microsoft.mshtml

This assembly will be in almost all the Windows machines. You could find the assembly in the following path:

C:\Windows\assembly\GAC\Microsoft.mshtml\7……. \Microsoft.mshtml.dll

Basics of the Project

Before moving into the explanation of how this is done, I would describe the functionalities of the button that I use in this application.

• Move back to the previous website
• Move forward to the next website (visited)
• To highlight the items in the current page
• To go to Google home page
• Refresh/ Navigate to the website that is in the URL text box

Highlighting the Elements and Getting the HTML XML Path of the Element (Clicked)

I implemented this functionality using the jQuery. To understand the following article, the user has to know the basics of the jQuery at-least. (To know about the jQuery basics, please read the following article: http://www.w3schools.com/jQuery/).

To highlight the element, I used the mouse over/mouseout function in jQuery. When the mouse is over the element, the element will be assigned to red color border with increased width. Event stopPropogation is used to stop the event at the current element rather (instead of continuing to its parents).

$('div').mouseover( 
function(event){event.stopPropagation(); $(this).css('border-color','red'); 
$(this).css('border-width','4px'); $(this).css('border-style','solid'); })

When the mouse is out of the element, it gets back the old default shape and color.

.mouseout(function (event) { event.stopPropagation();$(this).css('border-color',''); 
$(this).css('border-width','');$(this).css('border-style','');}) 

Once the element is clicked, it gives the HTML XML path by using the following function:

$('div').click(function(event){event.stopPropagation();alert(getElementPath(this));})}

function getElementPath(element){ 
return'//'+ $(element).parents().andSelf().map(
function(){ 
var $this=$(this);var tagName=this.nodeName;
if($this.siblings(tagName).length>0){ tagName +='['+$this.prevAll(tagName).length+']';}
return tagName;}).get().join('/').toUpperCase();
}}

This function gets the current element and all its parents tag name and form the XML path.

To see how it works in the application, click and play around with the cursor. You could see the elements are getting highlighted (Only div elements will be highlighted based on my programming. If you want other particular elements to be highlighted, then replace the div tag in mouse over function in jquery and execute in your application).

Then click the element, which displays the XML path in the alert box.

Forward and Backward Functionality

We can use browser.GoBack() or browser.GoForward() in our control. But this is quite a problem in WebBrowser, because at times some websites will be loaded too many times because of the images/Ajax controls, etc. which makes the control difficult to track backward and forward. So in order to achieve the best way we can use Stacks for this. The moment it got loaded successfully, it can be put in backward Stack, then while moving back, the first URL (which is the current page) will be moved to the Forward Stack and the next URL in backward stack can be displayed. I have given the example of the backward button event in the following:

if (backWardStack.Count>0)
                {
                //Get the current URL from backward
                string url = backWardStack.Pop();
                ForwardStack.Push(url);
                if (backWardStack.Count > 0)
                {
                    webBrowser1.Navigate(backWardStack.Pop());
                }
               }

Conclusion

I hope you understand the above clearly. This is my first tip, I welcome both your positive and negative reviews. Your reviews/comments would help me grow. Thank you guys. I will see you soon in my next post.