Berechnen Sie die Position eines Elements auf einer Webseite in JavaScript_Javascript-Tipps

Aufgrund der Anforderungen des Projekts sind beim Testen Screenshots von Webseitenelementen erforderlich, um sicherzustellen, dass sie normal aussehen. BevorIch habe einen Artikel geschrieben, in dem eine Methode vorgestellt wird, verwenden Sie zunächst WebDriver, um einen Vollbild-Screenshot zu erstellen, und schneiden Sie dann den Screenshot entsprechend der Position des Zielelements (DOM-Element) zu, wobei wir den benötigten Standort beibehalten.

Dieser Code hat gut funktioniert, bis ich etwas herausgefunden habe: iframe. Der Inhalt eines Iframes (normaler Frame ist derselbe, aber Frame ist jetzt weniger verbreitet, hier wird nur Iframe als Beispiel verwendet) wird als unabhängige Webseite betrachtet, und sogar das Window-Objekt ist von seiner übergeordneten Webseite getrennt. Die WebElement.getLocation()-Methode in WebDriver kann nur die Positionsbeziehung zwischen diesem WebElement und dem Fenster zurückgeben, in dem es sich befindet. Es gibt kein Problem mit der Implementierung, aber der Vollbild-Screenshot enthält nicht nur den Inhalt des Iframes, sondern auch kann auch den Inhalt der übergeordneten Seite enthalten. Beim Zuschneiden müssen Sie die Position des Zielelements im Screenshot kennen. Die Frage ist also: Welches Unternehmen verfügt über die beste Baggertechnologie? Wie berechnet man die Position eines Elements relativ zum Screenshot?

Dieses Problem muss in einer separaten Kategorie behandelt werden. Der Grund dafür ist: Das Verhalten von Screenshots in Chrome und Firefox ist unterschiedlich. Der Screenshot von Chrome ist der aktuell sichtbare (Ansichtsfenster) Inhalt der Webseite. Wenn die tatsächliche Größe der Webseite beispielsweise die Größe des Chrome-Fensters überschreitet, unterscheidet sich der im Fenster angezeigte Inhalt je nach Position der Bildlaufleiste den angezeigten Inhalt. Wir müssen also die Position des Zielelements relativ zum aktuell sichtbaren Inhalt berechnen. Firefox verwendet eine Methode, die den Inhalt der gesamten Webseite erfassen kann, unabhängig von der aktuellen Fenstergröße. Für Firefox müssen wir also die absolute Position des Elements berechnen (Absolute Position).

Um die Position eines Elements zu ermitteln, müssen Sie eine Methode verwenden: Element.getBoundingClientRect(). Diese Methode gibt die Position dieses Elements relativ zum aktuell sichtbaren Inhalt des Fensters zurück, in dem es sich befindet, dargestellt durch vier Werte: oben, links, rechts und unten. Wir kümmern uns nur um oben und links. Die Ausschnittsgröße können wir ohne Berechnung aus der Länge und Breite des Elements selbst ermitteln. Um die Position des Zielelements relativ zum Fenster der obersten Ebene zu berechnen, müssen wir nur den oberen und linken Teil des übergeordneten Fensters der Reihe nach hinzufügen. Der Code lautet wie folgt:

function calcViewportLocation(element) {
 var currentWindow = window;
 var rect = element.getBoundingClientRect(); // 元素的位置
 var top = rect.top;
 var left = rect.left;
 while (currentWindow.frameElement != null) { // 处理父级 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)];
}

Der obige Code funktioniert für Chrome, aber in Firefox müssen wir auch die absolute Position des Elements berechnen. Hier wird Window.pageXOffset benötigt. pageXOffset oder scrollX stellt die Bildlaufposition der horizontalen Bildlaufleiste des aktuellen Fensters dar. Fügen Sie diesen Wert oben links hinzu, um die horizontale absolute Position des Zielelements zu erhalten. Natürlich kann iframe auch speziell behandelt werden:

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)];
}

Da IE8 pageXOffset und scrollX nicht unterstützt, ist in IE8 eine spezielle Verarbeitung erforderlich, nämlich der im Code mit „IE8“ gekennzeichnete Teil. Indem Sie diese beiden Teile des Javascript-Codes im vorherigen Artikel durch WebElement.getLocation() ersetzen, können Sie einen Screenshot eines bestimmten Elements in einem Iframe erstellen.