GrabzIt'ın JavaScript API'si, oluşturulan tüm HTML öğelerinin CSS ile stillendirilmesine izin verir.
Görüntü ekran görüntüleri displayid
ve displayclass
parametreleri. Bu parametreler dinamik olarak, image nesnesine id veya class niteliğini respectivley ekleyin. Altında CSS Ekran görüntüsü görüntüsüne sınıf atanır.
<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 daha sonra aşağıda gösterildiği gibi görüntüye stil vermek için belirtilebilir.
<style> .MyClass { border:1px solid red; } </style>
Bu seçenekleri kullanmanın bir başka avantajı da ekran görüntüsünü değiştirmek için JavaScript kullanmanıza izin verir. Belirtilen kimliğin altında oluşturulan görüntü ekran görüntüsüne atanır ve ardından belirtilen onfinish Ekran görüntüsü yüklendiğinde işlev çağrılır. Bu işlev daha sonra ekran görüntüsünü almak için belirtilen kimliği kullanır ve yüksekliğini gösterir.
<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>
Hata mesajları kullanılarak errorid
ve errorclass
parametreleri. Bu parametreler, sırasıyla id veya class niteliğini hata iletisine dinamik olarak ekler <span>
ek olarak, varsayılan hata stilini de silerken.
<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>
Hata mesajı aşağıda gösterildiği gibi şekillendirilebilir.
<style> .MyErrorClass { font-weight:bold; } </style>
Elbette bu, onerror olay sonra hata mesajı da JavaScript ile manipüle edilebilir. Altında errorid
hata mesajı yayılımına başvuruda bulunabilmesi için onerror
işlevi. Bu işlev daha sonra belirli bir hata kodu döndürüldüğünde hata mesajını değiştirir.
<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>