ה- API של GrabzIt של JavaScript מאפשר לעצב את כל רכיבי ה- HTML שנוצרו באמצעות CSS.
ניתן לעצב צילומי מסך של תמונות באמצעות displayid
ו displayclass
פרמטרים. פרמטרים אלה מוסיפים באופן דינמי את המזהה או תכונת הכיתה respectivley, לאובייקט התמונה. מתחת א CSS הכיתה מוקצה לתמונת המסך.
<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 לעיצוב התמונה, כמוצג להלן.
<style> .MyClass { border:1px solid red; } </style>
יתרון נוסף בשימוש באפשרויות אלה מאפשר גם להשתמש ב- JavaScript כדי לתפעל את תמונת המסך. מתחת למזהה שצוין מוקצה למסך המסך של התמונה שנוצר ולאחר מכן לציין גמור הפונקציה נקראת ברגע שטעינת המסך. לאחר מכן פונקציה זו משתמשת במזהה שצוין כדי לקבל את תמונת המסך ומציגה את גובהה.
<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>
ניתן לעצב הודעות שגיאה באמצעות errorid
ו errorclass
פרמטרים. פרמטרים אלה מוסיפים באופן דינמי את מזהה או תכונת המחלקה בהתאמה להודעת השגיאה <span>
אלמנט, תוך כדי הסרת סגנון שגיאת ברירת המחדל.
<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>
לאחר מכן ניתן לעצב את הודעת השגיאה, כמוצג להלן.
<style> .MyErrorClass { font-weight:bold; } </style>
כמובן שאם משתמשים בזה בשילוב עם ה- טרור אירוע אז ניתן לטפל בהודעת השגיאה באמצעות JavaScript. מתחת א errorid
מוגדר כך שניתן להפנות את טווח הודעת השגיאה בסעיף onerror
פונקציה. פונקציה זו משנה את הודעת השגיאה אם מוחזר קוד שגיאה מסוים.
<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>