Webpage element coordinate Extraction Based on browser API

I. Objectives

ObtainWebElement coordinates on the page, such as obtainingHttp://www.baidu.com/click the upper limit and the upper limit.

II. Environment and development tools

Environment:Java

Tools:Eclipse

Development Kit:

Iii. Principles

The browser can obtain Html Source code, through the browser kernel Html Resolution engine pair Html Parse the source code, and finally obtain the document model. Dom , The browser rendering engine is created immediately Dom Corresponding Render Tree, JS Engine parsing and execution Javascript , Typographical engine (such IE Of Mshtml To draw a layer template ( Layout In the end, the rendering engine renders the layer template to display beautiful webpage pages to users.

It can be seen that the typographical engine knowsHtmlThe page elements are laid out on the browser platform only when they are in the coordinates of the client browser.

Therefore, to obtain the coordinates of a webpage element, you only need to use a browser to parse the relevant data of the typographical engine obtained after the webpage, and then you can obtain the coordinates of a webpage element.

MshtmlYesWindows Web Browser-The name of the Internet Explorer typographical engine, also knownTrident).MshtmlIsComComponent, which encapsulatesHtmlAll elements and their attributes in a language can access all elements of a specified Webpage through the standard interface provided by the language..

MshtmlProvides numerousAPIWrite for usersProgramAnd provides the following standard interfaces:

 

In theseMshtmlThere are many interfaces provided to access webpage elements, such:

 

There are several ways to obtain coordinates of webpage elements.

Where,OffsetleftIs to obtain the offset pixels Based on the Left shift of the parent element,OffsettopIs to obtain the offset pixels for moving down based on the parent element,Offsetparent obtains the parent element of the Offset element.

Therefore, you can use the method provided by this interface to extract the coordinates of an element. Its ReferenceAlgorithmAs follows:

(1) obtain the interface pointer of the control element whose coordinates need to be obtained in the webpage form; (2) Call the get_offsetleft () function based on the obtained interface pointer () (3) accumulate get_offsettop and get_offsetleft until offestparent is the body to obtain the coordinates of the element relative to the upper left corner of the page. (4) obtains the coordinates in the lower-right corner of the control element. The method is similar to the method above (2) and (3). To obtain the abscissa of an element, you must first add the width of the element. You can use the get_offsetwidth () function to obtain the coordinates, at the same time, you must add the height of the element to obtain the ordinate values by using the get_offsetheight () function.

Iv. Specific implementation

1. Build a browser and navigate to www.baidu.com.

Class is defined:

Where,IdolongwebbrowserIs based onJexplorer-1.9Browser Interface.

 

2. Use org. W3C. Dom. Document. getelementbyid (string elementid)Get webpage ElementsHtmlelement

ObtainIDIsKWEnter the text box andIDIsSuThe "Baidu click" button, the two elementsHtmlSource code:

 

<Input name = WD id = Kw maxlength = 100 style = "width: 444px;">

<Input type = submit value ="Baidu"Id = su class = BTN onmousedown =" This. classname = 'btn btn_h '"onmouseout =" This. classname = 'btn' ">

 

Therefore, you can know theirIDAttribute.

 

3. CreateHtmlelementAndMshtmlOfIhtmlelementInterface message binding

This function is used to obtainHtmlelementCorrespondingMshtmlMediumIhtmlelementInterface, called in the calculation coordinate function.

 

4. Computing elementXCoordinates andYCoordinate Functions

V. debugging and Result

ObtainHtmlelementObject and obtain the correspondingWebbrowserInterface, call the coordinate function:

 

Execution result:

 

 

It is worth declaring that the coordinates are based on the browser's upper left corner, that is, the upper left corner is (0, 0).