Tools zum Erfassen und Konvertieren des Webs

Style Screenshots mit JavaScriptJavaScript-API

Mit der JavaScript-API von GrabzIt können alle generierten HTML-Elemente mit CSS formatiert werden.

Bilder stylen

Screenshots k√∂nnen mit dem gestylt werden displayid und weiterf√ľhrende displayclass Parameter. Diese Parameter f√ľgen dem Bildobjekt dynamisch die ID bzw. das Klassenattribut hinzu. Unten a CSS Klasse ist dem Screenshot zugeordnet.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"displayclass": "MyClass"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"displayclass": "MyClass"}).Create();
</script>

CSS kann dann angegeben werden, um das Bild wie unten gezeigt zu gestalten.

<style>
.MyClass
{
    border:1px solid red;
}
</style>

Ein zusätzlicher Vorteil dieser Optionen besteht darin, dass Sie JavaScript verwenden können, um das Screenshot-Bild zu bearbeiten. Darunter wird die angegebene ID dem generierten Screenshot und dann der angegebenen zugeordnet onfinish Die Funktion wird aufgerufen, sobald der Screenshot geladen wurde. Diese Funktion verwendet dann die angegebene ID, um das Screenshot-Bild abzurufen und dessen Höhe anzuzeigen.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).Create();
</script>

Style-Fehlermeldungen

Fehlermeldungen k√∂nnen mit dem gestylt werden errorid und weiterf√ľhrende errorclass Parameter. Diese Parameter f√ľgen der Fehlermeldung dynamisch die ID bzw. das Klassenattribut hinzu <span> Element, w√§hrend zus√§tzlich die Standardfehlerart entfernt.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"errorclass": "MyErrorClass"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"errorclass": "MyErrorClass"}).Create();
</script>

Die Fehlermeldung kann dann wie unten dargestellt formatiert werden.

<style>
.MyErrorClass
{
    font-weight:bold;
}
</style>

Nat√ľrlich, wenn dies in Kombination mit dem verwendet wird Onerror Eventuell kann dann die Fehlermeldung auch mit JavaScript manipuliert werden. Unten a errorid wird angegeben, damit auf die Fehlermeldungsspanne in der verwiesen werden kann onerror Funktion. Diese Funktion √§ndert dann die Fehlermeldung, wenn ein bestimmter Fehlercode zur√ľckgegeben wird.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).Create();
</script>