So erkennen Sie einen leeren Bereich auf einer Webseite

Question

Gibt es eine Möglichkeit, einen leeren Bereich ohne Text oder Bilder auf einer Webseite mithilfe von JavaScript zu erkennen?

Genauer gesagt, wie Sie feststellen können, ob der Punkt [x, y] in einem leeren Bereich ist, wie im folgenden Beispiel (rot markiert)

EDIT: Ich möchte, dass meine Frage machen klarer, ich baue eine Erweiterung, die Suchergebnisse als vertrauenswürdig oder als Spam markieren soll, möchte ich meine Markierung am Ende des Textes einer Ergebnis-URL platzieren. Ich möchte es auch in einer generischen Art und Weise tun, damit es nicht nur in Google-Webseite funktioniert. ein Beispiel ist unten dargestellt:

Answer 1

• Sie können eine Matrix mit einer Breite und Länge der Seite bauen.
• Setzen Sie alle Matrixzellen auf Null.
• Holen Sie sich alle Elemente des DOM.
• Get x, y, Breite und Höhe jedes Element dieser Link Retrieve the position (X,Y) of an HTML element

• Zeichnen Sie die Elemente in der Matrix

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

• Und schließlich überprüfen, ob matrix[i][j] auf Null kann helfen, festgelegt ist oder 1

Answer 2

Ein Ansatz wäre, mit einem Screenshot des Fensters zu arbeiten.

Sie können Bibliotheken wie html2canvas verwenden, um einen Screenshot in ein HTML-Canvas-Element zu laden.

Als nächste auf window.onclick, verwenden Sie die automatischen event Parameter einen RGBA-Array des geklickt zu bekommen koordinieren:

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

Nun, wenn alle (oder zumindest die ersten drei) pixelData ‚Artikel s 255 gleich, es bedeutet, dass dieser Punkt weiß ist.

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 
} 

Natürlich ist die Kehrseite ist, dass Sie die Hintergrundfarbe der Seite zu wissen, haben Sie testen, oder die Hintergrundfarbe des Elements in Sie klicken.

Answer 3

Sie können für testen echte weißen Raum wie folgt aus:

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

wo coords ein Objekt mit .x und .y Eigenschaften ist.

DEMO

document.elementFromPoint(), dokumentiert here "eine experimentelle Technologie" ist, also würde ich mein Leben nicht darauf vertrauen.Testen Sie gründlich auf allen Zielplattformen.

---

bearbeiten

Für die vollständige Erkennung aller weißen Sie suchen, würde isWhiteSpace() die erste von zwei Stufen sein. Die zweite Stufe wäre isVisualWhiteSpace(), die zum Beispiel mit dem Ansatz von @ remdevtec implementiert wird.

Da meine isWhiteSpace(coords) preiswert ist, würden Sie es zuerst durchführen und nur wenn es falsch zurückkehrt, gehen Sie für den teuren Test. Sie könnten den Schutz Eigenschaft ||

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

Aber Ihr eigentliches Problem isVisualWhiteSpace() wird das Schreiben verwenden. Ich kann nicht anders.