Calculation of the location of an element in a webpage in JavaScript _ javascript skills

This article describes how to calculate the location of an element in a webpage in JavaScript. This article first explains some necessary knowledge and implementation difficulties, and then provides the implementation code, if you need it, you can refer to the project's needs. in the test, you need to perform webpage elements to ensure that it looks okay. I have written an article to introduce a method. First, use WebDriver to perform full screen, and then crop the captured image based on the location of the target Element (DOM Element, keep the location we need.

The code always works well until I know something: iframe. Iframe (a normal frame is the same, but frame is not very common now. here we only use the iframe example) content is considered as an independent webpage, A Window object is also separated from its parent webpage. And WebElement in WebDriver. the getLocation () method can only return the relationship between the WebElement and its location in the Window. its implementation is fine, but the full screen not only contains the iframe content, it may also contain the content of its parent page. you need to know the position of the target element during tailoring. So the question is, which excavator technology is strong? How to calculate the position relative to an element?

This issue should be further discussed in different categories because Chrome and Firefox have different behaviors. Chrome is the content of the currently visible (viewport) webpage. for example, when the actual size of the webpage exceeds the size of the Chrome window, the content displayed in the window varies according to the position of the scroll bar, chrome is the content displayed. Therefore, we need to calculate the position of the target element relative to the currently visible content. Firefox uses a method to capture the content of the entire webpage and ignore the size of the current window. So for Firefox, we need to calculate the Absolute Position of the element (Absolute Position ).

To obtain the position of an Element, you need to use the method Element. getBoundingClientRect (). This method returns the position of this element relative to the current visible content of Windows, which is represented by top, left, right, and bottom values. We only care about the top and left of the elements. As for the size of the cropped elements, we can use the length and width of the elements themselves, and do not need to calculate them. To calculate the position of the target element on the top-level Window, we only need to add top and left of its parent-level Window in sequence. The code is as follows:

Function calcViewportLocation (element) {var currentWindow = window; var rect = element. getBoundingClientRect (); // The position of the element var top = rect. top; var left = rect. left; while (currentWindow. frameElement! = Null) {// process the parent Window element = currentWindow. frameElement; currentWindow = currentWindow. parent; rect = element. getBoundingClientRect (); if (rect. top> 0) {top + = rect. top;} if (rect. left> 0) {left + = rect. left ;}} return [Math. round (top), Math. round (left)];}

The above code applies to Chrome, and in Firefox, we also need to calculate the absolute position of the element. Window. pageXOffset is used here. PageXOffset, or scrollX, indicates the position of the horizontal scroll bar of the current Window. add this value to the left to obtain the horizontal absolute position of the target element. Of course, iframe can also be specially processed:

function calcAbsolutLocation(element) { var top = 0; var left = 0; var currentWindow = window; while (element != null) {  rect = element.getBoundingClientRect();  var pageYOffset = currentWindow.pageYOffset;  var pageXOffset = currentWindow.pageXOffset;  if (typeof pageYOffset === 'undefined') { // IE8   currentDocument = currentWindow.document;   var bodyElement = (currentDocument.documentElement     || currentDocument.body.parentNode || currentDocument.body);   pageYOffset = bodyElement.scrollTop;   pageXOffset = bodyElement.scrollLeft;  }  top += rect.top + pageYOffset;  left += rect.left + pageXOffset;  element = currentWindow.frameElement;  currentWindow = currentWindow.parent;  if (element != null) {   style = window.getComputedStyle(element);   top += parseInt(style.borderTopWidth, 10);   left += parseInt(style.borderLeftWidth, 10);  } } return [Math.round(top), Math.round(left)];}

Because IE8 does not support pageXOffset and scrollX, some special processing is required in IE8, that is, the part marked with "IE8" in the code. Replace the two Javascript codes with WebElement. getLocation () in the previous text to implement specific elements in iframe.