So erkennen Sie einen leeren Bereich auf einer Webseite
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 sich der Punkt [x, y] in einem leeren Bereich befindet, wie im folgenden Beispiel (rot markiert)
EDIT: Ich möchte meine Frage klarer stellen, ich baue eine Erweiterung, die Suchergebnisse als vertrauenswürdig oder als Spam markieren soll Markierung am Ende des Textes einer Ergebnis-URL. Ich möchte es auch generisch machen, damit es nicht nur auf der Google-Webseite funktioniert. Ein Beispiel ist unten gezeigt:
3 Antworten
Sie können für echten Leerraum wie folgt testen:
%Vor% wobei coords ein Objekt mit den Eigenschaften .x und .y ist.
document.elementFromPoint() , dokumentiert hier , ist "eine experimentelle Technologie" Also würde ich meinem Leben nicht vertrauen. Testen Sie gründlich auf allen Zielplattformen.
Bearbeiten
Für die vollständige Erkennung des von Ihnen gewünschten Weißs ist isWhiteSpace() die erste von zwei Stufen. Die zweite Stufe wäre zum Beispiel isVisualWhiteSpace() mit dem Ansatz von @ remdevtec implementiert.
Da mein isWhiteSpace(coords) kostengünstig ist, würden Sie es zuerst ausführen und nur wenn es falsch zurückkehrt, gehen Sie für den teuren Test. Sie könnten die Schutzeigenschaft von ||
Aber dein echtes Problem wird isVisualWhiteSpace() schreiben. Ich kann nicht anders.
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ächstes, in window.onclick , benutze den automatischen Parameter event , um ein RGBA-Array der angeklickten Koordinate zu erhalten:
Wenn jetzt alle (oder mindestens die ersten drei) pixelData -Elemente gleich 255 sind, bedeutet dies, dass dieser Punkt weiß ist.
Natürlich müssen Sie die Hintergrundfarbe der Website, die Sie testen, oder die Hintergrundfarbe des Elements, auf das Sie klicken, kennen.
- Sie können eine Matrix mit Breite und Länge der Seite erstellen.
- Setze alle Matrixzellen auf Null.
- Erhalte alle Elemente des DOM.
- Erhalten Sie x, y, Breite und Höhe jedes Elements, dieser Link kann helfen Abrufen der Position (X, Y) eines HTML-Elements
-
Zeichnen Sie die Elemente in der Matrix
%Vor% -
Und schließlich prüfen, ob
matrix[i][j]auf Null oder 1 gesetzt ist
Tags und Links javascript html jquery