כלים ללכידה ולהמרה של האינטרנט

צילומי מסך מעוצבים עם JavaScriptממשק API של JavaScript

ה- API של GrabzIt של JavaScript מאפשר לעצב את כל רכיבי ה- HTML שנוצרו באמצעות CSS.

תמונות סגנון

ניתן לעצב צילומי מסך של תמונות באמצעות displayid ו displayclass פרמטרים. פרמטרים אלה מוסיפים באופן דינמי את המזהה או תכונת הכיתה respectivley, לאובייקט התמונה. מתחת א CSS הכיתה מוקצה לתמונת המסך.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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>