Tools om het web vast te leggen en te converteren

Stijl Screenshots met JavaScript

JavaScript API

Met de JavaScript API van GrabzIt kunnen alle gegenereerde HTML-elementen worden gestileerd met CSS.

Stijlafbeeldingen

Beeldschermafbeeldingen kunnen worden vormgegeven met de displayid en displayclass parameters. Deze parameters voegen dynamisch het respectieve kenmerk id of class toe aan het afbeeldingsobject. Hieronder een CSS klasse wordt toegewezen aan de screenshotafbeelding.

<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 kan vervolgens worden opgegeven om de afbeelding op te maken, zoals hieronder wordt getoond.

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

Een bijkomend voordeel van het gebruik van deze opties is dat u ook JavaScript kunt gebruiken om de screenshotafbeelding te manipuleren. Hieronder wordt het opgegeven ID toegewezen aan het gegenereerde screenshot en vervolgens aan het opgegeven onfinish functie wordt aangeroepen zodra het screenshot is geladen. Deze functie gebruikt vervolgens de opgegeven id om de screenshotafbeelding te krijgen en geeft de hoogte weer.

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

Stijlfoutmeldingen

Foutmeldingen kunnen worden gestileerd met behulp van de errorid en errorclass parameters. Met deze parameters wordt respectievelijk het id- of class-kenmerk dynamisch aan het foutbericht toegevoegd <span> element, terwijl bovendien de standaardfoutstijl wordt verwijderd.

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

Het foutbericht kan vervolgens worden opgemaakt, zoals hieronder wordt weergegeven.

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

Natuurlijk als dit wordt gebruikt in combinatie met de onerror gebeurtenis dan kan de foutmelding ook worden gemanipuleerd met JavaScript. Hieronder een errorid is opgegeven zodat naar de foutmeldingen kan worden verwezen in de onerror functie. Deze functie wijzigt vervolgens het foutbericht als een bepaalde foutcode wordt geretourneerd.

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