Skip to content
Advertisements

JavaScript onload Event

Why onload ?

The JavaScript onload feature works when the web page’s images, videos, and articles are fully loaded. So, shortly after the web page is loaded, it works. Usually used in the element. For example, this feature allows you to design different web pages in different browsers.

Syntax:

<element onload=”script”>

  • script: Codes to run when loading a web page.

onload Examples

Example 1

onload example 1
<body onload="onloadFunction()">

    <script>

        function onloadFunction() {
            alert("The onloadFunction property is running.")
        }

    </script>
</body>

Example 2

onload example 2
        window.onload = onloadFunction();

        function onloadFunction() {
            alert("The onloadFunction property is running.")
        }

Example 3

onload example 3
<body>

    <iframe class="website" src="https://truecodes.org" width="400px" height="500px"></iframe>

    <script>

        document.querySelector(".website").addEventListener("load", onFunction);

        function onFunction() {
            alert("The onloadFunction property is running")
        }


    </script>
</body>

Example 4

onload example 4
<body>
    <iframe id="website" src="googlse.des" width="100px" height="100px"></iframe>
    <div id="image"></div>

    <script>

        var img = document.getElementById("image"),
            web = document.getElementById("website");
        
        img.addEventListener("load", webPageError())

        function webPageError() {
            if (navigator.cookieEnabled == true) {
                img.innerHTML = "<img src='https://kodoloji.com/wp-content/uploads/1-qdFdhbR00beEaIKDI_WDCw.gif'>"
            }
            else {
            }
        }

    </script>
</body>

Example 5

onload example 5
<body onload="myFunction()">

    <h2>Onload Testing</h2>

    <script>

        function myFunction() {
            document.write("<img src='http://aoainsaat.com/back.jpg'>");
        }

    </script>
</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: