رویداد load در جاوااسکریپت (رویداد ششم)

توضیح:

این رویداد زمانی رخ می دهد که یک آبجکت در صفحه لود شده است.

از این رویداد بیشتر برای المنت body استفاده می شود. در زمانی که قصد داریم یک بار اسکریپت را پس از لود کامل محتوای صفحه (تصاویر، اسکریپت، استایل) اجرا شود.

کاربرد دیگر این رویداد در زمانی است که قصد داریم نوع مرورگر یا نسخه مرورگر کاربر را بررسی و چک کنیم.

کاربرد دیگر این رویداد در زمانی است که قصد داریم فعال بودن کوکی در صفحه را بررسی کنیم.

نحوه نوشتن:

در حالت خصوصیت تگ HTML:

<element onload="myScript">

1	<element onload="myScript">

در داخل جاوااسکریپت:

object.onload = function(){myScript};

1	object.onload = function(){myScript};

در قالب متد addEventListener:

object.addEventListener("load", myScript);

1	object.addEventListener("load", myScript);

تگ های پشتیبان کننده:

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

1	<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

نسخه پشتیبانی مرورگرها:

مرورگر Chrome	مرورگر Firefox	مرورگر Edge	مرورگر Safari	مرورگر Opera
همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها

حالت Bubbles:

نه

حالت Cancelable:

نه

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="myfunction()">
<input type="text">
<script>
    function myfunction(){
        alert('loaded page');
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

function myfunction(){

alert('loaded page');

}

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>
<iframe onload="myFunction()" src="../default.html"></iframe>
<p id="demo"></p>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Iframe is loaded.";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

function myFunction() {

document.getElementById("demo").innerHTML = "Iframe is loaded.";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>
<iframe src="http://localhost:63342/htdocs/event%20samples/onkeydown.html?_ijt=9u9fum6mujtjqkt4eu08i1l6rp&_ij_reload=RELOAD_ON_SAVE"></iframe>
<p id="demo"></p>
<script>
    document.querySelector("iframe").onload = myFunction;
    function myFunction() {
        document.getElementById("demo").innerHTML = "Iframe is loaded.";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

document.querySelector("iframe").onload = myFunction;

function myFunction() {

document.getElementById("demo").innerHTML = "Iframe is loaded.";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>
<iframe src="http://localhost:63342/htdocs/event%20samples/onkeydown.html?_ijt=9u9fum6mujtjqkt4eu08i1l6rp&_ij_reload=RELOAD_ON_SAVE"></iframe>
<p id="demo"></p>
<script>
    document.querySelector("iframe").addEventListener('load', myFunction);
    function myFunction() {
        document.getElementById("demo").innerHTML = "Iframe is loaded.";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

document.querySelector("iframe").addEventListener('load', myFunction);

function myFunction() {

document.getElementById("demo").innerHTML = "Iframe is loaded.";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif">
<p id="demo"></p>
<script>
    document.querySelector("img").onload = myFunction;
    function myFunction() {
        document.getElementById("demo").innerHTML = "Iframe is loaded.";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

document.querySelector("img").onload = myFunction;

function myFunction() {

document.getElementById("demo").innerHTML = "Iframe is loaded.";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
    document.querySelector("body").onload = myFunction;
    console.log(navigator);
    var text = "";
    function myFunction() {
        if(navigator.cookieEnabled){
            text += 'Cookies are enabled.';
        }else{
            text += 'Cookies are not enabled.';
        }
        document.getElementById("demo").innerText = text;
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

document.querySelector("body").onload = myFunction;

console.log(navigator);

var text = "";

function myFunction() {

if(navigator.cookieEnabled){

text += 'Cookies are enabled.';

}else{

text += 'Cookies are not enabled.';

}

document.getElementById("demo").innerText = text;

}

</script>

</body>

</html>

کلمات کلیدی را وارد نمایید

رویداد load در جاوااسکریپت (رویداد ششم)

آموزش رویدادها در جاوااسکریپت

توضیح:

نحوه نوشتن:

تگ های پشتیبان کننده:

نسخه پشتیبانی مرورگرها:

حالت Bubbles:

حالت Cancelable:

مثال:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش رویدادها در جاوااسکریپت

دسترسی سریع

کلمات کلیدی را وارد نمایید

رویداد load در جاوااسکریپت (رویداد ششم)

آموزش رویدادها در جاوااسکریپت

توضیح:

نحوه نوشتن:

تگ های پشتیبان کننده:

نسخه پشتیبانی مرورگرها:

حالت Bubbles:

حالت Cancelable:

مثال:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش رویدادها در جاوااسکریپت

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب