Tools zum Erfassen und Konvertieren des Webs

Style Screenshots mit JavaScript

JavaScript-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 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@/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@/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@/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@/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 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@/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@/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@/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@/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>