Kira kedudukan elemen dalam halaman web dalam petua JavaScript_javascript

Disebabkan keperluan projek, tangkapan skrin elemen halaman web diperlukan semasa ujian untuk memastikan ia kelihatan normal. SebelumSaya menulis artikel yang memperkenalkan kaedah, mula-mula gunakan WebDriver untuk mengambil tangkapan skrin penuh, dan kemudian memangkas tangkapan skrin mengikut lokasi elemen sasaran (Elemen DOM), mengekalkan lokasi yang kita perlukan.

Kod itu berfungsi dengan baik sehingga saya mengetahui sesuatu: iframe. Kandungan dalam iframe (bingkai biasa adalah sama, tetapi bingkai kini kurang biasa, hanya iframe digunakan sebagai contoh di sini) dianggap sebagai halaman web bebas, malah objek Window dipisahkan daripada halaman web induknya. Kaedah WebElement.getLocation() dalam WebDriver hanya boleh mengembalikan hubungan kedudukan antara WebElement ini dan Tetingkap yang terletak di dalamnya. Tiada masalah dengan pelaksanaannya, tetapi tangkapan skrin penuh bukan sahaja mengandungi kandungan iframe, tetapi mungkin juga termasuk kandungan halaman induknya, anda perlu mengetahui kedudukan elemen sasaran dalam tangkapan skrin semasa memotong. Jadi persoalannya, syarikat manakah yang mempunyai teknologi penggali terbaik? Bagaimana untuk mengira kedudukan elemen berbanding dengan tangkapan skrin?

Isu ini perlu dibincangkan dalam kategori berasingan Sebabnya ialah: kelakuan tangkapan skrin dalam Chrome dan Firefox adalah berbeza. Tangkapan skrin Chrome ialah kandungan halaman web (port pandangan) yang boleh dilihat pada masa ini, contohnya, apabila saiz sebenar halaman web melebihi saiz tetingkap Chrome, kandungan yang dipaparkan dalam tetingkap adalah berbeza bergantung pada kedudukan tangkapan skrin Chrome kandungan yang dipaparkan. Jadi kita perlu mengira kedudukan elemen sasaran berbanding kandungan yang boleh dilihat pada masa ini. Firefox menggunakan kaedah yang boleh menangkap kandungan keseluruhan halaman web, tanpa mengira saiz tetingkap semasa. Jadi untuk Firefox kita perlu mengira kedudukan mutlak elemen (Kedudukan Mutlak).

Untuk mendapatkan kedudukan elemen, anda perlu menggunakan kaedah: Element.getBoundingClientRect(). Kaedah ini mengembalikan kedudukan elemen ini berbanding kandungan Windows yang boleh dilihat pada masa ini, diwakili oleh empat nilai: atas, kiri, kanan dan bawah. Kami hanya mengambil berat tentang bahagian atas dan kiri Bagi saiz keratan, kami boleh mendapatkannya dari panjang dan lebar elemen itu sendiri, tanpa pengiraan. Untuk mengira kedudukan elemen sasaran berbanding dengan Tetingkap peringkat atas, kita hanya perlu menambah bahagian atas dan kiri Tetingkap induknya mengikut urutan. Kodnya adalah seperti berikut:

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

Kod di atas berfungsi untuk Chrome, tetapi dalam Firefox, kita juga perlu mengira kedudukan mutlak elemen tersebut. Window.pageXOffset diperlukan di sini. pageXOffset, atau scrollX, mewakili kedudukan tatal bar skrol mendatar Tetingkap semasa Tambahkan nilai ini ke kiri di atas untuk mendapatkan kedudukan mutlak mendatar elemen sasaran. Sudah tentu, iframe juga boleh dirawat secara istimewa:

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

Memandangkan IE8 tidak menyokong pageXOffset dan scrollX, beberapa pemprosesan khas diperlukan dalam IE8, iaitu bahagian bertanda "IE8" dalam kod. Dengan menggantikan dua keping kod Javascript ini dengan WebElement.getLocation() dalam artikel sebelumnya, anda boleh mengambil tangkapan skrin elemen tertentu dalam iframe.