Thursday, August 1, 2013

Get Element XPath of Selected Element Of IFrame Using Jquery

How To Get Element XPath of Selected Element Of IFrame Using Jquery


This a query language that can be used to select arbitrary parts of HTML documents in ability.
XPath is a language that describes a way to locate and process items in HTML And XML documents by using an addressing syntax based on a path through the document's logical structure or hierarchy.

Get  XPath of Selected Element Of IFrame Using Jquery

If you want to get element`s XPath of selected element of Iframe and also add highlight css in element on mouseover , out and click event.
     1.    Create Project
     2.  Add an Iframe page
a.       -Add required contents & element
b.      Add reference of “Highlight” css file under the page head.
     3.  Add Iframe parent page
a.       Add Iframe
b.  Add required content and element.
c.  Add jquery-1.4.1.js or latest js file under head section    
d.      Create Jquery code and function for this functionality.
e.      Add document.ready function.
f.        Create function get element`s XPath.

Highlight CSS (highlight.css)

IFrame Page(Iframe.htm)

Main Page (Parent Page-Index)
Jquery Code 
Sample Screenshots
- Highlight-on-mouseover

-Get XPath On Click In Alert()


  1. Great work. I have a requirement for some dev work using this technique. Please call me on 9883031533 if you are interested.

  2. Very nice job! Thanks a lot for sharing. How to load remote url in iframe? eg in cross browser. When i try to read the page its throwing Error: Permission denied to access property 'nodeType'. please help me how to resolve this issue. Thanks

  3. Very good! Thanks for sharing.
    Where can I download your code?

  4. This is fantastic, thank you very much!