Come rilevare uno spazio vuoto su una pagina Web

Question

C'è un modo per rilevare un'area vuota, senza testo o immagini all'interno di una pagina Web, utilizzando JavaScript?

Più precisamente, come determinare se il punto [x, y] è all'interno di un'area vuota, come nel seguente esempio (segnato in rosso)

EDIT: voglio fare la mia domanda più chiaro, sto costruendo un'estensione che dovrebbe contrassegnare i risultati di ricerca come affidabile o come spam, voglio mettere il mio marchio alla fine del testo di un URL di un elemento risultato. Voglio anche farlo in un modo generico, quindi non funzionerebbe solo nella pagina web di Google. un esempio è mostrato sotto:

Answer 1

• si può costruire una matrice con larghezza e lunghezza della pagina.
• Imposta tutte le celle della matrice su zero.
• Ottieni tutti gli elementi del DOM.
• Get x, y, la larghezza e l'altezza di ogni elemento, questo collegamento può aiutare Retrieve the position (X,Y) of an HTML element

• Disegnare gli elementi nella matrice

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

• Infine controllare se matrix[i][j] è impostato su zero o 1

Answer 2

Un approccio sarebbe quello di lavorare con uno screenshot della finestra.

È possibile utilizzare librerie come html2canvas per caricare uno screenshot su un elemento canvas HTML.

Avanti, su window.onclick, utilizzare il parametro automatico event per ottenere un array RGBA del cliccato coordinate:

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

Ora, se tutti gli elementi (o almeno le prime tre) pixelData 's uguali 255, significa che questo punto è bianco.

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 
} 

Naturalmente, il lato negativo è che devi conoscere il colore di sfondo del sito che si sta testando, o il colore dell'elemento di fondo si fa clic.

Answer 3

È possibile verificare genuina spazio bianco come questo:

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

dove coords è un oggetto con .x e .y proprietà.

DEMO

document.elementFromPoint(), documentato here, è "una tecnologia sperimentale", in modo da non affidare la mia vita ad esso.Testare attentamente su tutte le piattaforme di destinazione.

---

Modifica

Per l'intero rilevamento di tutti i bianchi che si cercano, isWhiteSpace() sarebbe la prima delle due fasi. Il secondo stadio sarebbe isVisualWhiteSpace() implementato con l'approccio di @ remdevtec per esempio.

Siccome il mio isWhiteSpace(coords) è economico, lo si eseguirà prima e solo se restituito falso andrà per il test costoso. È possibile utilizzare la proprietà di protezione di ||

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

Ma il problema vero sarà la scrittura isVisualWhiteSpace(). Non posso aiutare con quello.