Strumenti per acquisire e convertire il Web

Schermate di stile con JavaScript

API JavaScript

L'API JavaScript di GrabzIt consente di definire tutti gli elementi HTML generati con CSS.

Immagini di stile

Gli screenshot delle immagini possono essere disegnati usando displayid ed displayclass parametri. Questi parametri aggiungono dinamicamente l'attributo id o class rispettivamente all'oggetto immagine. Sotto a CSS la classe è assegnata all'immagine dello screenshot.

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

È quindi possibile specificare CSS per modellare l'immagine, come mostrato di seguito.

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

Un ulteriore vantaggio dell'utilizzo di queste opzioni consente anche di utilizzare JavaScript per manipolare l'immagine dello screenshot. Sotto l'id specificato viene assegnato lo screenshot dell'immagine generata e quindi quello specificato OnFinish la funzione viene chiamata una volta caricato lo screenshot. Questa funzione utilizza quindi l'id specificato per ottenere l'immagine dello screenshot e visualizzarne l'altezza.

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

Messaggi di errore di stile

I messaggi di errore possono essere definiti utilizzando il errorid ed errorclass parametri. Questi parametri aggiungono dinamicamente l'attributo id o class rispettivamente al messaggio di errore <span> elemento, rimuovendo ulteriormente lo stile di errore predefinito.

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

Il messaggio di errore può quindi essere disegnato, come mostrato di seguito.

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

Naturalmente se questo è usato in combinazione con onerror l'evento quindi il messaggio di errore può anche essere manipolato con JavaScript. Sotto a errorid è specificato in modo che sia possibile fare riferimento all'intervallo di messaggi di errore in onerror funzione. Questa funzione modifica quindi il messaggio di errore se viene restituito un determinato codice di errore.

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