Jak wykrywać puste miejsce na stronie internetowej?

Question

Czy istnieje sposób wykrywania pustego obszaru bez tekstu lub obrazów na stronie internetowej przy użyciu JavaScript?

Dokładniej, jak ustalić, czy punkt [x, y] jest w pustym obszarze, jak w poniższym przykładzie (zaznaczone na czerwono)

EDIT: chcę, aby moje pytanie jaśniej, buduję rozszerzenie, które ma oznaczać wyniki wyszukiwania jako godne zaufania lub jako spam, Chcę umieścić moje oznaczenie na końcu tekstu URL elementu wynikowego. Ja też chcę to zrobić w sposób ogólny, więc nie działałoby to tylko na stronie Google. przykład przedstawiono poniżej:

Answer 1

• Można utworzyć matrycę z szerokością i długością strony.
• Ustaw wszystkie komórki macierzy na zero.
• Pobierz wszystkie elementy DOM.
• Get x, y, szerokość i wysokość każdego elementu, ten link może pomóc Retrieve the position (X,Y) of an HTML element

• Draw elementów w macierzy

  for(k=0;k < dom_elements.length;k++) { 
      for(i=dom_elements[k].y;i < dom_elements[k].length;i++) { 
       for(j=dom_elements[k].x;j < dom_elements[k].width;j++) { 
  
        matrix[i][j] = 1 ; 
  
       } 
      } 
  } 
  

• I wreszcie sprawdzić, czy matrix[i][j] jest ustawiony na zero lub 1

Answer 2

Jednym podejściem byłoby pracować ze zrzutem ekranu okna.

Możesz użyć bibliotek, takich jak html2canvas, aby załadować zrzut ekranu do elementu canvas HTML.

Następnie na window.onclick użyć automatycznego event parametr, aby uzyskać tablicę RGBA z kliknięty współrzędnych:

var pixelData = canvas.getContext('2d').getImageData(
    event.offsetX, 
    event.offsetY, 1, 1) 
.data; 

Teraz, jeśli wszystko (lub przynajmniej pierwszych trzech) pixelData „s elementy równy 255, to oznacza, że ​​ten punkt jest biały.

if (pixelData[0] == 255 && pixelData[1] == 255 && pixelData[2] == 255) { 
    // the clicked point is white, 
    // and if the background-color is white, 
    // it can be considered an empty point 
} 

Oczywiście wadą jest to, że trzeba wiedzieć, kolor tła miejscu jesteś testowanie, czy kolor tła elementu kliknięciu w.

Answer 3

można przetestować za prawdziwy spacje tak:

function isWhiteSpace(coords) { 
    var element = document.elementFromPoint(coords.x, coords.y); 
    var whitespace = $(document).add("body, html"); 
    return (whitespace.get().indexOf(element) > -1) ? true : false; 
} 

gdzie coords to obiekt z .x i .y właściwości.

DEMO

document.elementFromPoint(), udokumentowany here, to "technika eksperymentalna", więc nie ufaj mi życie do niego.Testuj dokładnie na wszystkich platformach docelowych.

---

Edit

Pełen wykrywania cały biały szukacie, isWhiteSpace() będzie pierwszym z dwóch etapów. Drugi etap to isVisualWhiteSpace() zaimplementowany na przykład przy użyciu metody @ remdevtec.

Ponieważ mój isWhiteSpace(coords) jest tani, należy wykonać go jako pierwszy i tylko wtedy, gdy zwróci false, przejdź do kosztownego testu. Można użyć właściwości ochronne ||

var isWhite = isWhiteSpace(coords) || isVisualWhiteSpace(coords); 

Ale twój prawdziwy problem zostanie pisemnie isVisualWhiteSpace(). Nic na to nie poradzę.