CSS - Wie finde ich eine Farbe auf der Seite AutoNavigate wenn Seite geladen

ich eine Seite, die ich täglich arbeiten und ich brauche durch die Seite für Text zu suchen, die HTML-Code hat:CSS - Wie finde ich eine Farbe auf der Seite AutoNavigate wenn Seite geladen

<tr style="background-color:#33FF00">

Wie kann Ich verwende CSS, um beim Laden der Seite automatisch zu dieser Farbe oder zum HTML-Code zu navigieren. Gibt es einen Weg?

Ich kann das HTML nicht bearbeiten, da es nicht lokal gehostet wird und ich habe keinen Zugriff auf Schreibzugriff, nur lesen. Ich benutze derzeit den Stylebot, um das CSS für meine eigenen Anzeigezwecke zu ändern und möchte wissen, ob ich dasselbe tun kann, um automatisch zu diesem farbigen Bereich zu navigieren.

Wenn es einen ähnlichen Weg zur Verwendung von style bot gibt, aber für HTML wie uscripts usw., bin ich nicht vertraut genug. Wenn Sie eine Workaround haben, wäre ein Tutorial toll, um mir zu zeigen, wie es implementiert wird.

Danke!

Quelle

2016-12-22 compunerd3

Probieren Sie, ob der Abschnitt eine ID hat, und fügen Sie diese dann zur URL der Seite hinzu. CSS-IDs beginnen mit einem # (die URL würde folgendermaßen aussehen: mycoolwebsite.com/#mycoolid –

Da die angegebene HTML-Zeile keine ID enthält, können Sie nicht automatisch zu diesem Element navigieren. Sie könnten B. TamperMonkey oder GreaseMonkey verwenden, um IDs in jedes Element einzufügen und diese dann zum Navigieren zu verwenden, aber das ist etwas komplexer. – junkfoodjunkie

Es hat leider keine ID. Es ist nur Ich bin nicht wirklich mit userscripts vertraut, um IDs auf jedem Element hinzuzufügen.Außerdem ist der tatsächliche Ort des farbigen Textes bei jedem Auffrischen unterschiedlich, so dass er sich nicht jedes Mal an der gleichen Stelle befindet, wenn ich die Seite lade. – compunerd3

AKTUALISIERT

Kopieren Sie den folgenden Code in eine Textdatei einfügen und als HTML-Datei speichern. Dann öffne es in einem Browser.

Dieser Code lädt die Zielseite vom Host in das Element 'result' und navigiert mithilfe einiger Post-load-JavaScript-Elemente zu den farbigen Elementen tr. Wenn die Seite Skripte für externe Stylesheets usw. benötigt, müssen diese explizit geladen werden.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$.ajaxPrefilter(function (options) { 
    if (options.crossDomain && jQuery.support.cors) { 
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; 
    //options.url = "http://cors.corsproxy.io/url=" + options.url; 
    } 
}); 
$(document).ready(function(){ 
    var sourceUrl='https://en.wikipedia.org/wiki/Main_Page'; 
    var sourceScript='https://en.wikipedia.org/wiki/Main_Page'; 
    $("#result").load(sourceUrl, function() { 
     $.getScript(sourceScript, function(){ 
     alert("Script loaded and executed."); 
     }); 
     $('html, body').animate({ 
      scrollTop: $('tr').filter(function(){ 
       var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ; 
       return color === "#33ff00"; 
      }).position().top 
     }, 100); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="result"></div> 

</body> 
</html>

von jQuery scroll to element und JQuery Find Elements By Background-Color

UPDATE 2

Oder in einem iFrame (aber nur funktioniert, wenn Sie auf der gleichen Domäne wie die Zielseite sind)

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
function onLoadHandler(){ 
var $iframe = $("#result").contents(); 
var trs=$iframe.find('tr'); 
    $iframe.find('html,body').animate({ 
    scrollTop: trs.filter(function(){ 
     var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ; 
     return color === "#33ff00"; 
    }).position().top 
    }, 100); 
}; 
</script> 
</head> 
<body> 

<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>  
</body> 
</html>

UPDATE 3

Wenn nichts davon funktioniert, versuchen Sie: 1) laden Sie Ihre Seite in einem Browser, 2) öffnen Sie Developer Tools, 3) gehen Sie zum Seiteninspektor oder die Registerkarte Elemente, 3) Strg-F und suchen Sie nach Ihrer Farbzeichenfolge ('# ddcef2'), 4) rechts~~POS=TRUNC auf das erste markierte Element in den Suchergebnissen und wählen Sie "Blättern in Sicht"

Quelle

2016-12-22 13:26:42 longestwayround

sind Danke, ich habe versucht, dies nur mit der Quelle als http://google.com, aber es wird nicht geladen. Ich habe 1.html und jquery.min.js im selben Ordner auf meinem Desktop, aber wenn ich die HTML-Seite lade, ist es nur ein leerer Bildschirm. – compunerd3

Haben Sie die sourceUrl-Variable so geändert, dass sie Ihrer Ziel-URL entspricht? – longestwayround

Ich bemerkte, dass Ihre Farbe, die ich kopiere/eingefügt habe, nicht klein war. Ich werde entsprechend bearbeiten. – longestwayround

versuchen und sehen, ob das funktioniert der Trick:

* { 
 
    display: none 
 
} 
 
[style*=background-color:#33FF00] { 
 
    display: table-row 
 
}

Quelle

2016-12-23 19:32:00

CSS - Wie finde ich eine Farbe auf der Seite AutoNavigate wenn Seite geladen

Antwort

Verwandte Themen